Canvas画布逆时针旋转功能未达预期求助（附实现代码）

嘿，我帮你排查了代码里的几个关键问题，这些问题导致旋转功能没达到预期效果，下面一步步说清楚并给出修正后的代码：

问题分析 #

你的核心思路是对的：保存当前画布内容 → 切换画布尺寸 → 旋转后重新绘制，但在坐标变换这一步出了错，导致图像旋转后位置不对，甚至可能完全看不到。具体问题有两个：

• 错误的平移参数：你用了context.translate(cw, ch / cw)，这完全不符合绕中心旋转的坐标逻辑
• 没有正确对齐旋转后的图像位置，导致图像偏离画布

修正后的完整代码 #

<canvas id="one" width="100" height="200"></canvas>
<button id="rotate">逆时针旋转90°</button>

<script>
var canvas = document.getElementById("one");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

// 绘制示例图形
context.beginPath();
context.rect(10, 10, 20, 50);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();

// 绑定按钮点击事件
var button = document.getElementById("rotate");
button.onclick = function () {
  rotate();
}

var myImageData, rotating = false;
var rotate = function () {
  if (!rotating) {
    rotating = true;
    // 保存当前画布内容为图片对象
    myImageData = new Image();
    myImageData.src = canvas.toDataURL();
    myImageData.onload = function () {
      // 交换画布宽高：原宽度变新高度，原高度变新宽度
      const newWidth = ch;
      const newHeight = cw;
      canvas.width = newWidth;
      canvas.height = newHeight;
      // 更新全局宽高变量
      cw = newWidth;
      ch = newHeight;
      
      context.save();
      
      // 关键：正确的绕中心旋转坐标变换流程
      // 1. 将坐标系原点平移到新画布的中心
      context.translate(cw / 2, ch / 2);
      // 2. 逆时针旋转90度（Math.PI/2 对应90度弧度）
      context.rotate(Math.PI / 2);
      // 3. 将坐标系平移回原图像的中心（抵消原图像的偏移，保证居中）
      context.translate(-ch / 2, -cw / 2);
      
      // 绘制保存的图像，此时会自动应用上面的旋转和平移
      context.drawImage(myImageData, 0, 0);
      
      context.restore();
      
      // 清理临时变量
      myImageData = null;
      rotating = false;
    }
  }
}
</script>

关键修正点说明 #

1. 坐标变换逻辑：绕中心旋转的正确步骤是「移到中心 → 旋转 → 移回原图像中心」，这样能保证旋转后的图像始终在画布正中央，不会偏移。
2. 画布尺寸同步：明确交换宽高的逻辑，先保存新的宽高值再赋值给canvas，避免变量混淆。
3. 旋转状态锁：保留了rotating变量，防止用户快速点击按钮导致多次旋转冲突，这个设计是很好的。

现在点击按钮，画布就会绕中心逆时针旋转90°，同时画布的宽高也会同步切换，完全符合你的需求啦！

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