Как можно вращать изображение вокруг себя, используя 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