Como seria de girar uma imagem em torno de si usando Canvas?

Question

Estou tendo problemas roating uma imagem em torno de si usando Canvas.

Uma vez que você não pode girar uma imagem que você tem que girar a tela: se eu girar a tela por um grau a origem em torno do qual eu quero mudanças de rotação. Eu não entendo como acompanhar essa mudança.

Este é o meu código atual: http://pastie.org/669023

E uma demo é em http://preview.netlashproject.be/cog/

Se você quer dar coisas um tiro o código-se compactado e imagem é em http: / /preview.netlashproject.be/cog/cog.zip

Answer 1

Eu fixo o seu código:

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

O importante aqui é que você tem que traduzir a imagem para a origem antes de girar, e traduzi-lo de volta!

Answer 2

parece que isso poderia ser algo que você poderia usar: http://wilq32.googlepages.com/ wilq32.rollimage222

aqui está uma prova de que: http://www.antiyes.com/test/index .php