在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/