Canvas图片绕中心旋转异常：以角落为旋转点而非中心

我帮你搞定这个Canvas旋转的坑！你遇到的情况其实是Canvas变换系统的一个常见误区：默认情况下，Canvas的旋转操作是基于**画布原点（左上角）**进行的，所以直接旋转图片的话，它会绕着左上角做圆周运动，而不是自身中心。要实现绕自身中心旋转，得调整坐标系变换的顺序，让旋转的中心刚好落在图片的中心点上。

核心原理 #

要让图片绕自身中心旋转，需要遵循这几个步骤（顺序绝对不能乱！）：

1. 保存当前画布状态（避免后续变换影响其他绘制元素）
2. 将坐标系平移到图片的中心点位置
3. 绕当前坐标系原点（也就是图片中心）执行旋转
4. 绘制图片时，把图片的左上角定位到负的自身宽高一半的位置（这样图片的中心刚好和当前坐标系原点重合）
5. 恢复画布状态，还原坐标系

代码修改示例 #

假设你的Sprite类原来的draw方法是直接旋转后绘制，现在改成正确的变换逻辑：

class Sprite {
  constructor(img, x, y) {
    this.img = img;
    this.x = x;
    this.y = y;
    this.width = img.width;
    this.height = img.height;
    this.rotation = 0;
  }

  draw(ctx) {
    ctx.save(); // 先保存当前画布状态

    // 1. 把坐标系平移到图片的中心位置
    const centerX = this.x + this.width / 2;
    const centerY = this.y + this.height / 2;
    ctx.translate(centerX, centerY);

    // 2. 绕当前坐标系原点（图片中心）旋转
    ctx.rotate(this.rotation);

    // 3. 绘制图片：此时原点在图片中心，所以左上角要定位到负半宽高的位置
    ctx.drawImage(this.img, -this.width / 2, -this.height / 2);

    ctx.restore(); // 恢复画布状态，不干扰其他绘制
  }
}

动画循环的调整 #

在你的动画循环里，只需要正常更新旋转角度即可：

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  sprite.rotation += 0.01; // 每帧增加一点旋转角度
  sprite.draw(ctx);

  requestAnimationFrame(animate);
}

这样修改后，图片就会稳稳地绕自身中心旋转，而不是做圆周运动了。关键就是要先把坐标系移到图片中心，再旋转，最后绘制时调整图片位置让中心对齐坐标系原点。

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