Javascript 使用2d html5Canvas和ctx.rotate函数沿其面对的方向移动对象

标题说明了一切，我试图根据物体所处的角度向前移动物体

这是我的相关代码：

xView =  this.x-this.width/2;
yView =  this.y-this.height/2; 
playerCtx.drawImage(imgSprite, 0, 0, this.width, this.height, xView, yView, this.width, this.height); 
      playerCtx.save();     
      playerCtx.clearRect(0, 0, game.width, game.height);
      playerCtx.translate(xView, yView);
      playerCtx.rotate(angle *Math.PI/180);
      playerCtx.drawImage(imgSprite, 0, 0, this.width, this.height, -xView, -yView, this.width, this.height); 
      playerCtx.restore();
    }
        if(Game.controls.left) {
    angle-=1; 
        if(Game.controls.up){
        this.x +=   this.speed * Math.cos(angle * Math.PI / 180);
        this.y -=   this.speed * Math.sin(angle * Math.PI / 180);
        }

对象不会根据

变量角度移动

编辑

我不明白为什么我的代码不起作用，所以我使用了一个包含36个不同角度的精灵表。这是可行的，但是旋转太快了。如果有人能告诉我为什么上面的功能不能正常工作，或者我将如何使以下功能运行得更慢：

if(Game.controls.right) {
    currentFrame++;
    angle+=10;
 }

我所说的慢是指按下左键时，
angle+10；currentFrame++正在提升到快速，添加更多帧可能需要太长时间

编辑

为我的原始问题添加了一个，角度变量会随着旋转而移动，例如，如果对象面向右侧，角度将等于90，但对象看起来仍然不像它向右移动，尽管相机会这样做。
试着改变周围的cos和sin以及符号：

this.x += this.speed * Math.cos(angle * Math.PI / 180);
this.y += this.speed * Math.sin(angle * Math.PI / 180);

要进行旋转（在问题的编辑部分），您需要基本上减少步骤并提供更多精灵。更多的精灵不会变慢，但会占用更多内存，并稍微增加初始加载时间

更新

好的，有几件事你需要纠正（上面是其中之一，它们在小提琴中被纠正）


其他方面包括：

在
update（）
方法中：

// Add both here as angle with correctly use neg/pos
if (Game.controls.up) {
    this.x += this.speed * Math.cos(angle * Math.PI / 180);
    this.y += this.speed * Math.sin(angle * Math.PI / 180);
}

/// Sub both here as angle with correctly use neg/pos
if (Game.controls.down) {
    this.x -= this.speed * Math.cos(angle * Math.PI / 180);
    this.y -= this.speed * Math.sin(angle * Math.PI / 180);
}

由于角度将决定负值或正值，您只需要根据意图进行加减，因此对于向上加两个值，对于向下减两个值。角度将确保三角形的符号正确

在
draw
函数中，有几点：

Player.prototype.draw = function (context, xView, yView) {

    // Add the half width instead of subtract it
    xView = this.x + this.width / 2;
    yView = this.y + this.height / 2;

    // not needed as you clear the canvas in the next step
    //playerCtx.drawImage(imgSprite, 0, 0, ....
    playerCtx.save();
    playerCtx.clearRect(0, 0, game.width, game.height);

    // make sure pivot is moved to center before rotation
    playerCtx.translate(xView, yView);

    // rotate, you should make new sprite where direction
    // points to the right. I'm add 90 here to compensate
    playerCtx.rotate((angle + 90) * Math.PI / 180);

    // translate back before drawing the sprite as we draw
    // from the corner and not the center of the image
    playerCtx.translate(-xView, -yView);

    playerCtx.drawImage(imgSprite, 0, 0, this.width, this.height, this.x, this.y, this.width, this.height);

    playerCtx.restore();
}

现在你会看到事情的进展

绘制图像时应始终指向右侧。这是因为角度始终为0度。这会给你省去一些麻烦。我通过在角度上增加90度来补偿绘制功能，但这应该在精灵本身中进行调整

此外，我还修改了您的密钥处理程序（有关详细信息，请参见演示）。
我已经切换了它们，但仍然遇到同样的问题，如果（Game.controls.right）
，是否还有其他方法可以减慢速度？将更多内容添加到精灵工作表需要一些时间。谢谢你的快速回复。顺便说一句@user2582299你能安装一把小提琴来测试吗。这样更容易找出错误。@user2582299谢谢，小提琴有帮助。请查看更新的答案，并确认您的玩家现在移动正确。谢谢您的帮助！画布没有跟随你小提琴中的演奏者，但我现在明白了。好东西，谢谢！