使用箭头键移动html5 canvas时在gameloop中旋转图像

Question

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

例如，我试图向上和向左移动，如您所见，我正在使用的旋转功能不起作用。我想做的是，当我向左移动时，坦克图像向左旋转并开始正常移动到通过减小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/