箭头键INT HTML5画布移动时旋转gameloop内的图像

Question

的jsfiddle：http://jsfiddle.net/seekpunk/B2nUs/6/

比如我试图拉升，并留下你可以看到，我使用了旋转功能是不是working.What我试图做的是当我移动到左侧坦克图像旋转到左侧，并通过递减x开始正常移动到左侧坐标任何人都可以告诉我什么是错误的代码以及为什么这种奇怪的行为发生？

draw: function() { 
    ctx.save(); 
    ctx.setTransform(1, 0, 0, 1, 0, 0); 
    ctx.translate(this.x + 28, this.y + 28); 
    var angleInRadians = this.rotation * Math.PI/180; 
    ctx.rotate(angleInRadians); 
    ctx.drawImage(tankImg, this.Pos * this.w, 0, this.w, this.h, this.x, this.y, this.w/3, this.h/3); 
    ctx.restore(); 
} 

Answer 1

drawImage所需要调整的一半所需的图像宽度/高度，因为在那里你想要的图像的中心是你已经翻译为：

ctx.save(); 
ctx.setTransform(1, 0, 0, 1, 0, 0); 
ctx.translate(x + 28, y + 28); 
var angleInRadians = rotation * Math.PI/180; 
ctx.rotate(angleInRadians); 
ctx.drawImage(tankImg, Pos*w,0, w,h, -w/6,-h/6, w/3,h/3); 
ctx.restore(); 

演示：http://jsfiddle.net/m1erickson/CLe8Z/