如何使用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