如何理解MDN Canvas绕中心旋转示例中的translate与rotate组合代码？

数值的含义 #

代码中的150和75是你要旋转的目标图形的中心点原始坐标，示例中对应的是一个左上角在(100,50)、宽100高50的矩形的中心：x=100+100/2=150，y=50+50/2=75，实际开发时可以根据自己的图形中心坐标替换这两个值。

变换步骤的逻辑 #

Canvas的rotate方法默认是绕**当前坐标系的原点（也就是画布左上角）**旋转，要实现绕图形自身中心旋转，需要通过平移调整旋转原点，三段代码的逻辑可以按两种方式理解：

直观理解（坐标系移动视角） #

你可以把变换过程理解为调整画布坐标系的位置：

• 第一步ctx.translate(150, 75)：将整个画布的坐标系原点，从默认的左上角移动到目标图形的中心点位置
• 第二步ctx.rotate(Math.PI / 2)：绕当前的坐标系原点（也就是图形中心）顺时针旋转90度（Math.PI / 2对应的弧度就是90度）
• 第三步ctx.translate(-150, -75)：旋转完成后，把坐标系原点移回原来的左上角位置，后续你按照原始坐标绘制图形时，自动就会呈现绕中心旋转后的效果

矩阵变换视角（点坐标计算逻辑） #

Canvas的变换矩阵是右乘规则，代码写的变换顺序是从左到右，实际作用到图形上的顺序是从右到左，图形上任意原始点(x,y)经过变换后的坐标计算过程如下：

1. 先执行最右侧的translate(-150, -75)：将原始点转换为以图形中心为原点的相对坐标

   x1 = x - 150
   y1 = y - 75
   

2. 再执行rotate(Math.PI / 2)：代入旋转矩阵[cosθ, -sinθ; sinθ, cosθ]，90度对应的cos值为0、sin值为1，计算后得到：

   x2 = 0 * x1 - 1 * y1 = -y1
   y2 = 1 * x1 + 0 * y1 = x1
   

3. 最后执行最左侧的translate(150, 75)：将相对坐标转换回画布的原始坐标系：

   x3 = x2 + 150
   y3 = y2 + 75
   

以图形中心点(150,75)代入计算，最终得到的坐标还是(150,75)，符合绕中心旋转时中心点位置不变的预期。

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