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