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/

使用箭头键int html5画布移动时，在游戏循环内旋转图像

1 个答案: