HTML5 Canvas에서 이미지 회전

Question

이미지가 있습니다. 각도로 회전 한 다음 한 지점에서 캔버스로 그려야합니다. 나는 현재이 있습니다

var image = roach.image; 
image.style.msTransform = 'rotate(' + roach.heading + 'deg)'; 
this.gameContext.drawImage(image, roach.position.x, roach.position.y); 

내가 roach.heading 내가 각도로 회전 할 내 각이고 그것이 작동되도록하려면이 옵션을 편집 할 수있는 방법.

Answer 1

이 시도 :

var image = roach.image, 
    ctx = this.gameContext, 
    widthHalf = Math.floor(image.width/2), 
    heightHalf = Math.floor(image.height/2); 

ctx.save(); 

ctx.translate(roach.position.x, roach.position.y); 
ctx.translate(widthHalf, heightHalf); 
ctx.rotate((Math.PI/180) * roach.heading); 
ctx.drawImage(image, -widthHalf, -heightHalf); 
ctx.restore(); 

jsfiddle : http://jsfiddle.net/PwzEc/