HTML5 girando una imagen con lienzo

Cómo rotar una imagen utilizando la función "rotar" del lienzo alrededor del centro de la imagen en lugar de girar alrededor del punto de origen.HTML5 girando una imagen con lienzo

Consideremos el siguiente ejemplo:

<html> 
    <head></head> 
    <body> 
     <canvas id="tmp" style="width: 300px; height: 300px; border: 1px red solid" /> 
     <script type="text/javascript"> 
      var deg = 0; 

      function Draw() { 
       var ctx = document.getElementById('tmp').getContext('2d'); 

       ctx.save(); 
       ctx.fillStyle = "white"; 
       ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height); 
       ctx.fillStyle = "red"; 

       ctx.rotate(deg * 0.0174532925199432957); //Convert to rad's 
       ctx.fillRect(50, 50, 20, 20); 
       ctx.restore(); 

       deg+=5; 

       setTimeout("Draw()", 50); 
      } 

      Draw(); 
     </script> 
    </body> 
</html>

en este ejemplo el cuadrado rojo se gira alrededor del orgin en 0,0. Digamos que quería rotar el cuadrado alrededor de su centro. He tratado de utilizar traducir para moverlo al origen luego gire a continuación, utilizar traducir de nuevo para volver a moverlo de este modo:

 ctx.translate(-(50 + 10), -(50 + 10)); //Move to origin 
     ctx.rotate(deg * 0.0174532925199432957); //rotate 
     ctx.translate(50, 50); //move back to original location 
     ctx.fillRect(50, 50, 20, 20); 
     ctx.restore();

pero parece que las llamadas a la función de traducir anulan traducir el anterior y no hacer combina las transformaciones. ¿Cómo puedo obtener el efecto que quiero?

Fuente

2011-08-19 Mike

¿Esto es lo que está buscando: jsFiddle?

//Move to center of rectangle 
ctx.translate(60, 60); 
ctx.rotate(deg * 0.0174532925199432957); //rotate 
//Draw rectangle 
ctx.fillRect(-10, -10, 20, 20); 
ctx.restore();

en cuenta que debe utilizar Math.PI/180 en lugar de que las grandes decimal.
También configuré correctamente su width y height en el lienzo, y cambié su setTimeout para no usar eval().

Fuente

2011-08-19 06:50:16

HTML5 girando una imagen con lienzo

Respuesta

Cuestiones relacionadas