Canvas中带旋转角度的游戏精灵如何正确实现相对坐标移动

问题核心 #

开发Canvas游戏时，无旋转的精灵直接修改x/y坐标即可实现移动，但当精灵叠加旋转变换后，画布坐标系会随旋转改变，直接修改坐标很容易出现移动方向和预期不符的问题。
当前核心渲染逻辑基于Canvas变换栈实现，存在图片、形状两个分支变换顺序不一致的问题，会进一步加大坐标逻辑的混淆概率，核心代码如下：

this.update = function() {
  ctx = myGameArea.context;
  if (type == "image") {
    ctx.save();
    ctx.translate(300, 200);
    ctx.rotate(this.angle);
    ctx.translate(this.x, this.y)
    ctx.drawImage(this.image, 
      this.width / -2, 
      this.height/ -2,
      this.width, this.height);
    ctx.restore(); 
  } else {
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  }
}

function framethingupdate() {
  gamething.update();
}

效果参考：

若图片加载失败可查看备用示例资源。

实现步骤 #

1. 先统一渲染变换逻辑 #

首先把两个渲染分支的变换顺序对齐，避免同一段移动逻辑在不同精灵类型上表现不一致。统一遵循「先移动到精灵全局锚点→再旋转精灵角度→最后绘制精灵中心对齐原点」的顺序：

this.update = function() {
  const ctx = myGameArea.context;
  ctx.save();
  // 第一步：移动到精灵在全局画布上的锚点位置
  ctx.translate(this.globalX, this.globalY);
  // 第二步：按精灵自身角度旋转坐标系
  ctx.rotate(this.angle);
  // 第三步：绘制内容，把精灵中心对齐当前坐标系原点
  if (this.type === "image") {
    ctx.drawImage(
      this.image,
      -this.width / 2,
      -this.height / 2,
      this.width,
      this.height
    );
  } else {
    ctx.fillStyle = this.color;
    ctx.fillRect(
      -this.width / 2,
      -this.height / 2,
      this.width,
      this.height
    );
  }
  ctx.restore();
}

这里单独用globalX、globalY存储精灵在全局画布的绝对位置，和局部坐标系偏移做区分，从根源上避免坐标混淆。

2. 按移动方向计算坐标增量 #

因为Canvas的y轴默认是向下为正，角度旋转默认是顺时针方向，用三角函数把相对精灵自身的移动量换算成全局坐标的增量即可，不需要手动维护复杂的局部坐标转换：

• 沿精灵自身朝向（垂直方向，前后移动）：

// speed为单次移动的像素值
// 向前（精灵头部指向方向）移动
this.globalX += Math.sin(this.angle) * speed;
this.globalY -= Math.cos(this.angle) * speed;

// 向后移动
this.globalX -= Math.sin(this.angle) * speed;
this.globalY += Math.cos(this.angle) * speed;

• 沿精灵自身横轴（水平方向，左右移动）：

// 向精灵自身右侧移动
this.globalX += Math.cos(this.angle) * speed;
this.globalY += Math.sin(this.angle) * speed;

// 向精灵自身左侧移动
this.globalX -= Math.cos(this.angle) * speed;
this.globalY -= Math.sin(this.angle) * speed;

注意事项 #

• Canvas的ctx.rotate()方法接收的参数是弧度值，如果你平时用角度值存储精灵转向，需要先做转换：弧度 = 角度 * Math.PI / 180
• 不要在旋转之后再修改全局位置相关的变量，所有全局坐标的计算都要在变换栈之外完成，避免坐标系嵌套导致的计算错误。

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