Javascript canvas对象在使用ctx.Rotate()旋转后卡住

Question

我正在试着做一个汽车游戏，每次你按一个箭头键，它就会旋转汽车。我已经创建了汽车，但每次我尝试使用ctx.Rotate旋转它时，汽车在将其移动到特定点后被卡住。这就好像整个画布是随着汽车旋转的。

车不能再向右移动了。

​

​

下面是我的代码，用于旋转然后绘制汽车：

    ctx.translate((canvas.width/2) - 50, (canvas.height/2) - 50);
    ctx.rotate(90*Math.PI/180);
    ctx.translate((-canvas.height.width/2) + 50, (-canvas.height/2) + 50);
    drawCircle(ctx, x, y);
    drawRect(ctx, x, y);
    drawWheels(ctx, x, y);

下面是我清空汽车的代码(用于刷新)：

function clear(obj) {
    obj.save();
    obj.setTransform(1, 0, 0, 1, 0, 0);
    obj.clearRect(0, 0, canvas.width, canvas.height);
    obj.restore();
}

检查汽车是否到达画布边缘的逻辑：

变量x和y是汽车的x和y坐标

var map = {}; // You could also use an array
    onkeydown = onkeyup = function(e) {
      e = e || event; // to deal with IE
      map[e.keyCode] = e.type == 'keydown';

    if (y < canvas.height && y > 0 && x < canvas.width && x > 0) {

      /* CODE FOR MOVING THE CAR GOES HERE */

      } else {

    if (y == canvas.height) {

    y = canvas.height -10
    }
        if (y == 0) {

    y = 10
}
else if (x >= canvas.width) {

x = canvas.width - 10

} 
else if (x == 0) {

x = 10
}
    }
    }

如果您需要的话，下面是整个代码的链接：https://jsfiddle.net/GautamGXTV/g8v31t4r/215/

Answer 1

你实际上是对的，当汽车旋转时，整个画布都会旋转。快速的解决方案是在旋转之前保存画布的状态，然后在绘制汽车后加载它。它应该是这样的：

ctx.save();
ctx.translate((canvas.width/2) - 50, (canvas.height/2) - 50);
ctx.rotate(90*Math.PI/180);
ctx.translate((-canvas.height.width/2) + 50, (-canvas.height/2) + 50);
drawCircle(ctx, x, y);
drawRect(ctx, x, y);
drawWheels(ctx, x, y);
ctx.restore();

另外需要注意的是，使用一个画布上下文进行所有渲染是一个好主意，因为你目前似乎得到了3个独立的上下文。如果您有任何进一步的问题，请随时提问！