webentwicklung-frage-antwort-db.com.de

Wie kann ich ein einzelnes Objekt auf einer HTML-5-Leinwand drehen?

Ich versuche herauszufinden, wie man ein einzelnes Objekt auf einer HTML 5-Leinwand dreht. 

Zum Beispiel: http://screencast.com/t/NTQ5M2E3Mzct - Ich möchte, dass jede dieser Karten unterschiedlich stark gedreht wird.

Alles, was ich bisher gesehen habe, sind Artikel und Beispiele, die zeigen, wie man die gesamte Leinwand drehen kann. Ich schätze, ich muss jetzt die Leinwand drehen, ein Bild zeichnen und dann die Leinwand wieder in ihre ursprüngliche Position drehen, bevor das zweite Bild gezeichnet wird. Wenn das der Fall ist, dann lass es mich wissen! Ich habe nur das Gefühl, dass es einen anderen Weg gibt.

Hat jemand eine Idee?

Danke im Voraus!

javascriptanimationhtml5canvas
31
Kappers

Leider können Sie im HTML5-Canvas-Element keine einzelnen Elemente drehen. 

Die Animation funktioniert wie das Zeichnen in MS Paint: Sie zeichnen etwas, erstellen einen Bildschirm. Verwenden Sie den Radiergummi, um etwas zu entfernen, etwas anders zu zeichnen, einen Bildschirm zu erstellen. Zeichnen Sie oben etwas anderes, erstellen Sie einen Bildschirm usw. usw.

Wenn Sie ein vorhandenes Element auf der Leinwand haben, müssen Sie es löschen (verwenden Sie beispielsweise ctx.fillRect() oder clearRect()) und zeichnen Sie dann das gedrehte Objekt.

Wenn Sie nicht sicher sind, wie Sie es beim ersten Zeichnen drehen sollen:

ctx.save();
ctx.rotate(0.17);
// draw your object
ctx.restore();
37
Artiom Chilaru

Ich bin in einem Projekt vor kurzem auf das gleiche Problem gestoßen (wo ich rotierende Aliens überallhin getreten habe). Ich habe gerade diese bescheidene Funktion verwendet, die dasselbe tut und auf dieselbe Weise wie ctx.rotate verwendet werden kann, aber einen Winkel übergeben kann. Funktioniert gut für mich.

function drawImageRot(img,x,y,width,height,deg){

    //Convert degrees to radian 
    var rad = deg * Math.PI / 180;

    //Set the Origin to the center of the image
    ctx.translate(x + width / 2, y + height / 2);

    //Rotate the canvas around the Origin
    ctx.rotate(rad);

    //draw the image    
    ctx.drawImage(img,width / 2 * (-1),height / 2 * (-1),width,height);

    //reset the canvas  
    ctx.rotate(rad * ( -1 ) );
    ctx.translate((x + width / 2) * (-1), (y + height / 2) * (-1));
}

Ja, meine erste Antwort!

52
user1602942

Um ein einzelnes Objekt zu drehen, müssen Sie die Transformationsmatrix einstellen. Das ist ganz einfach:

<body>
    <canvas width="1280" height="720" id="pageCanvas">
        You do not have a canvas enabled browser
    </canvas>
    <script>
        var context = document.getElementById('pageCanvas').getContext('2d');
        var angle = 0;
        function convertToRadians(degree) {
            return degree*(Math.PI/180);
        }

        function incrementAngle() {
            angle++;
            if(angle > 360) {
                angle = 0;
            }
        }

        function drawRandomlyColoredRectangle() {  
            // clear the drawing surface
            context.clearRect(0,0,1280,720);
            // you can also stroke a rect, the operations need to happen in order 
            incrementAngle();
            context.save();                
            context.lineWidth = 10;  
            context.translate(200,200);
            context.rotate(convertToRadians(angle));
            // set the fill style
            context.fillStyle = '#'+Math.floor(Math.random()*16777215).toString(16);
            context.fillRect(-25,-25,50,50);
            context.strokeRect(-25,-25,50,50);                
            context.restore();
        }

        // Ideally use getAnimationFrame but for simplicity:
        setInterval(drawRandomlyColoredRectangle, 20);
    </script>
</body>
16
Anthony W

Um ein Objekt richtig drehen zu lassen, ohne dass eine andere Form gedreht wird, müssen Sie Folgendes tun:

  1. speichern Sie den Kontext: ctx.save ()
  2. verschieben Sie den Drehpunkt an die gewünschte Position: ctx.translate (200, 200);
  3. zeichne die Form, Sprite, was auch immer: ctx.draw ...
  4. setzen Sie den Drehpunkt zurück: ctx.translate (-200, -200);
  5. stellen Sie den Kontext in den ursprünglichen Zustand zurück: ctx.restore ();

Formen außerhalb der oben genannten Liste werden nicht beeinflusst. Ich hoffe, es hilft. 

6
TTalt

Dieser HTML-/Javascript-Code könnte etwas Aufschluss über die Angelegenheit geben:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="233" height="233" style="border:1px solid #d3d3d3;">
your browser does not support the canvas tag </canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var canvasWidth=233;
var canvasHeight=233;
var rectWidth=100;
var rectHeight=150;
var x=30;
var y=30;
var translateX= x+(rectWidth/2);
var translateY= y+(rectHeight/2);

ctx.fillRect(x,y,rectWidth,rectHeight);

ctx.translate(translateX,translateY);
ctx.rotate(5*Math.PI/64); /* just a random rotate number */
ctx.translate(-translateX,-translateY); 
ctx.fillRect(x,y,rectWidth,rectHeight);


</script>

</body>
</html>

Ich finde es hilfreich, die Mathematik im Zusammenhang mit dem Drehen zu sehen. Ich hoffe, das war auch für Sie hilfreich.

3
turbopipp
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="450" style="border:1px solid #d3d3d3;">
</canvas>

<Button id = "right" onclick = "rotateRight()">Right</option>
<Button id = "left" onclick = "rotateLeft()">Left</option>
<script src = "zoom.js">

</script>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

createRect();

function rotateRight()
{
 ctx.save();
 ctx.clearRect(0,0,500,450);
 ctx.translate(c.width/2,c.height/2);
 ctx.rotate(10*Math.PI/180 );  
 ctx.translate(-c.width/2,-c.height/2);
 createRect();

}

function rotateLeft()
{
 ctx.save();
 ctx.clearRect(0,0,500,450);
 ctx.translate(c.width/2,c.height/2);
 ctx.rotate(-10*Math.PI/180 );  
 ctx.translate(-c.width/2,-c.height/2);
 createRect();  
}



function createRect()
{
 ctx.beginPath();
 ctx.fillStyle = "#AAAA00";
 ctx.fillRect(250,250,90,50);
}
</script>

</body>
</html>
2
PGB

Um ein Objekt zu drehen, können Sie verwenden drehen() Methode. Hier das Beispiel, wie man ein rechteckiges Objekt im Uhrzeigersinn um 135 Grad dreht. 

 <script>
  var canvas = document.getElementById('Canvas01');
  var ctx = canvas.getContext('2d');

  var rectWidth = 100;
  var rectHeight = 50;

  //create line
  ctx.strokeStyle= '#ccc';
  ctx.beginPath();
  ctx.moveTo(canvas.width / 2, 0);
  ctx.lineTo(canvas.width / 2, canvas.height);
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.moveTo(0, canvas.height/2);
  ctx.lineTo(canvas.width, canvas.height/2);
  ctx.stroke();
  ctx.closePath();

  // translate ctx to center of canvas
  ctx.translate(canvas.width / 2, canvas.height / 2);

  // rotate the rect to 135 degrees of clockwise
  ctx.rotate((Math.PI / 180)*135);

  ctx.fillStyle = 'blue';
  ctx.fillRect(0, 0, rectWidth, rectHeight);
</script>
</body>

Hier die Demo und du kannst es selbst ausprobieren:  http://okeschool.com/examples/canvas/html5-canvas-rotate

2
MichaelCalvin

Ich fand diese Frage, weil ich einige Sachen auf einer Leinwand hatte, die sorgfältig mit Leinwandlinien gezeichnet wurden, und entschied dann, dass einige davon gedreht werden sollten. Ich wollte nicht wieder eine ganze Reihe komplexer Sachen machen, sondern wollte das drehen, was ich hatte. Eine einfache Lösung, die ich gefunden habe, war folgende:

ctx.save();

ctx.translate(x+width_of_item/2,y+height_of_item/2);
ctx.rotate(degrees*(Math.PI/180));
ctx.translate(-(x+width_of_item/2),-(y+height_of_item/2));

// THIS IS THE STUFF YOU WANT ROTATED
// do whatever it is you need to do here, moveto and lineto is all i used 
// I would expect anything to work. use normal grid coordinates as if its a
// normal 0,0 in the top left kind of grid

ctx.stroke();
ctx.restore();

Wie auch immer - es ist vielleicht nicht besonders elegant, aber es ist eine sehr einfache Möglichkeit, ein bestimmtes Element auf Ihre Leinwand zu drehen.

Schau dir all diese gedrehten Elemente an!

0
Alexander Bunting