如何在Canvas上旋转指定图像图层且保持背景固定？

你当前的代码里，背景其实没有被旋转——因为context.save()是在绘制背景之后调用的，旋转操作只影响save之后的绘制。你觉得背景也被旋转，大概率是图层旋转后偏移出了Canvas可视区域，导致你看不到原本的背景。

要让图层围绕中心旋转且保持在Canvas内，需要调整坐标系的原点和绘制位置，修改后的动画循环代码如下：

animationLoop() {
  const t = document.timeline.currentTime;
  context.clearRect(0, 0, width, height);
  // 绘制固定背景
  context.drawImage(background, 0, 0, width, height);
  
  context.save();
  // 将坐标系原点移到Canvas中心
  context.translate(width / 2, height / 2);
  // 执行旋转操作（可调整t的系数控制旋转速度）
  context.rotate(Math.PI * t);
  // 绘制图层，让图层中心与坐标系原点对齐
  layers.forEach((layer) => {
    context.drawImage(layer, -width / 2, -height / 2, width, height);
  });
  context.restore();
  
  requestAnimationFrame(animationLoop);
}

关键逻辑说明 #

• translate(width/2, height/2)：把坐标系原点从Canvas左上角(0,0)移到中心，让旋转围绕中心进行
• drawImage(layer, -width/2, -height/2, ...)：因为坐标系原点已在中心，图层左上角需要偏移负的一半宽高，才能让图层中心与原点对齐，避免旋转时图层偏移出画布
• 如果需要围绕其他点旋转，只需调整translate的目标坐标，以及drawImage的起始位置即可

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