如何让Canvas中的三角形朝向其移动方向旋转？

你的代码里有两个核心问题导致旋转无效果：

• 调用ctx.save()后执行了平移和旋转变换，但立刻用ctx.restore()恢复了上下文状态，导致后续绘制三角形时完全没应用这些变换。
• 绘制三角形时使用基于this.x、this.y的绝对坐标，就算变换生效，也会因为坐标偏移导致旋转逻辑错误。

修正后的draw方法如下：

draw(){
    ctx.fillStyle="white";
    const angle = Math.atan2(this.velY,this.velX);
    
    ctx.save();
    // 平移到三角形所在位置，将原点移到三角形中心
    ctx.translate(this.x,this.y);
    // 旋转到速度方向对应的角度
    ctx.rotate(angle);
    // 以变换后的原点(0,0)为基准绘制三角形
    ctx.beginPath();
    ctx.moveTo(0, 0);       // 三角形顶点
    ctx.lineTo(10, 10);     // 右下顶点
    ctx.lineTo(-10, 10);    // 左下顶点
    ctx.fill();
    // 恢复上下文状态，避免影响其他绘制操作
    ctx.restore();
}

修正说明 #

1. 把ctx.restore()移到三角形绘制完成后，确保平移、旋转变换完全作用在绘制过程中。
2. 改用相对坐标绘制三角形，这样旋转时会围绕this.x,this.y位置（三角形中心）转动，同时三角形会朝向速度方向移动。

如果需要调整三角形的朝向（比如让底边朝前），可以在rotate时额外增加角度偏移，例如ctx.rotate(angle + Math.PI/2)。

内容的提问来源于stack exchange，提问作者hxdshell