如何使用Canvas在圖片周圍旋轉圖片？

Question

我在使用Canvas圍繞自己旋轉圖像時遇到了麻煩。

既然你不能旋轉圖像，你必須旋轉畫布：如果我旋轉畫布的程度，我想旋轉更改原點。我不知道如何跟蹤這個變化。

這是我當前的代碼：http://pastie.org/669023

並演示是在http://preview.netlashproject.be/cog/

如果你想給的東西了一槍壓縮了代碼和圖片是在http://preview.netlashproject.be/cog/cog.zip

Answer 1

我定你的代碼：

var rotation = 0; 
function draw(){ 

    var ctx = document.getElementById('myCanvas').getContext('2d'); 
    ctx.globalCompositeOperation = 'destination-over'; 

    ctx.save(); 
    ctx.clearRect(0,0,200,200); 
    ctx.translate(100,100); // to get it in the origin 
    rotation +=1; 
    ctx.rotate(rotation*Math.PI/64); //rotate in origin 
    ctx.translate(-100,-100); //put it back 
    ctx.drawImage(cog,0,0); 
    ctx.restore(); 
} 

這裏最重要的是，你必須先轉動之前的圖像原點翻譯，並將其翻譯回來了！

Answer 2

它看起來像這樣可能是一些你可以使用：http://wilq32.googlepages.com/wilq32.rollimage222

這裏是它的一個測試：http://www.antiyes.com/test/index.php