Canvas图片旋转坐标系时，如何正确调整原点位置？

Question

在使用 HTML5 Canvas 进行图片旋转时，一个常见的问题是：**如何在旋转图像时正确调整坐标系原点，使旋转围绕图像中心而非左上角？** Canvas 的默认旋转是以画布左上角为原点进行的，若希望图像围绕其中心旋转，需先通过 `ctx.translate()` 将坐标系原点移动到图像中心，再调用 `ctx.rotate()` 进行旋转，最后使用 `ctx.drawImage()` 绘制图像。需要注意绘制时图像的起点应为负的宽高一半，以确保中心对齐。这一流程常因坐标变换顺序或绘制位置计算错误导致旋转偏移问题，是 Canvas 图像变换中常见的技术难点。

Answer 1

一、Canvas 图像旋转的基本原理

HTML5 Canvas 提供了强大的 2D 绘图能力，其中图像旋转是常见需求之一。默认情况下，Canvas 的旋转操作是围绕画布左上角（即坐标原点 (0, 0)）进行的。这种行为在绘制简单图形时可能没有问题，但在处理图像时，尤其是希望图像围绕其自身中心旋转时，会出现明显的偏移。

为了实现图像绕中心旋转，开发者需要手动调整坐标系的原点，使其位于图像的中心位置。

二、Canvas 坐标变换的顺序

Canvas 的变换操作是基于状态栈的，且变换顺序非常重要。由于变换是累积的，顺序错误会导致图像位置偏移。正确的变换顺序如下：

1. 使用 ctx.translate(x, y) 将坐标原点移动到图像中心；
2. 使用 ctx.rotate(angle) 进行旋转；
3. 使用 ctx.drawImage() 绘制图像，绘制起点为图像宽度和高度的一半的负值（即 -width / 2 和 -height / 2）。

三、代码示例与分析

以下是一个标准的图像绕中心旋转的示例代码：

    function drawRotatedImage(ctx, image, x, y, angle) {
      ctx.save(); // 保存当前上下文状态
      ctx.translate(x, y); // 移动原点到图像中心
      ctx.rotate(angle * Math.PI / 180); // 转换为弧度并旋转
      ctx.drawImage(image, -image.width / 2, -image.height / 2); // 绘制图像
      ctx.restore(); // 恢复上下文状态
    }
  

其中：

• ctx.save() 和 ctx.restore() 用于保存和恢复上下文状态，避免影响后续绘制；
• x 和 y 是图像绘制的中心坐标；
• -image.width / 2 和 -image.height / 2 确保图像绘制在新的坐标系中心。

四、常见问题与调试技巧

在实际开发中，常见的错误包括：

问题	原因	解决方法
图像旋转后偏移	未正确设置绘制起点为负值	确保使用 -width/2 和 -height/2
旋转角度不正确	未将角度转换为弧度	使用 Math.PI / 180 进行转换
多次旋转叠加	未使用 save() 和 restore()	每次变换前保存上下文，变换后恢复

五、流程图：图像旋转逻辑

      graph TD
        A[开始绘制图像] --> B[保存当前上下文状态]
        B --> C[移动坐标原点到图像中心]
        C --> D[旋转画布]
        D --> E[绘制图像（起点为负值）]
        E --> F[恢复上下文状态]
    

六、进阶：结合动画实现持续旋转

在实际应用中，图像旋转往往需要结合动画效果。例如实现一个持续旋转的图像动画：

    let angle = 0;
    function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawRotatedImage(ctx, img, canvas.width / 2, canvas.height / 2, angle);
      angle += 1;
      requestAnimationFrame(animate);
    }
  

该代码通过 requestAnimationFrame 实现平滑的旋转动画，适用于游戏、图表、仪表盘等场景。

七、总结与扩展

Canvas 图像旋转的核心在于理解坐标变换的顺序与绘制起点的计算。通过合理使用 translate、rotate 和 drawImage，可以实现围绕图像中心的旋转。此外，结合动画、缩放、翻转等变换操作，可以构建出丰富的视觉效果。

对于更复杂的图形变换，还可以考虑引入矩阵变换（ctx.setTransform() 或 ctx.transform()），实现更精细的控制。