캔버스를 사용하여 자체 주위의 이미지를 어떻게 회전시킬까요?

Question

나는 캔버스를 사용하여 자체 주위에 이미지를 로우는 데 어려움을 겪고 있습니다.

이미지를 회전시킬 수 없으므로 캔버스를 회전시켜야합니다. 캔버스를 어느 정도 회전하면 변경 사항을 회전시키려는 원점을 어느 정도까지 회전시킵니다. 이 변경 사항을 추적하는 방법이 없습니다.

이것은 내 현재 코드입니다. 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