HTML5使用畫布旋轉圖像

如何使用畫布的「旋轉」功能圍繞圖像中心旋轉圖像，而不是圍繞原點旋轉。HTML5使用畫布旋轉圖像

考慮下面的例子：在這個例子中，紅色正方形是在0,0圍繞淵源考旋轉

<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>

。假設我想圍繞其中心旋轉方塊。我試圖用翻譯將其移動到原點，然後旋轉，然後再次使用翻譯將其移回像這樣：

 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();

但它看起來像調用translate函數覆蓋以前的翻譯並沒有結合轉換。那麼我怎樣才能達到我想要的效果呢？

來源

2011-08-19 Mike

這是你什麼求找：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();

請注意，您應該使用Math.PI/180而不是那個大的小數。
我也在畫布上正確設置了您的width和height，並將您的setTimeout更改爲不使用eval()。

來源

2011-08-19 06:50:16

HTML5使用畫布旋轉圖像

回答

相關問題