HTML5中的Canvas矩阵变换Transform的数学原理

Canvas的transform方法本质是对当前绘图上下文坐标系应用仿射变换，用6参数矩阵[a,c,e,b,d,f]实现缩放、旋转、倾斜和平移，不改变图形本身而改变坐标系解释方式。

Canvas 的 transform 方法本质是**对当前绘图上下文的坐标系应用仿射变换**，其底层用一个 2×3 的矩阵（实际以 6 个数字表示）描述平移、旋转、缩放和倾斜的组合。它不改变图形本身，而是改变“画布怎么看待坐标”——就像转动画板、拉伸尺子、再挪动原点。

Canvas 变换矩阵的结构与含义

Canvas 使用的变换矩阵形式为：

[a, c, e,
 b, d, f]

对应数学上的仿射变换公式（将原始点 (x, y) 映射为新点 (x′, y′)）：

x′ = a·x + c·y + e
y′ = b·x + d·y + f

立即学习“前端免费学习笔记（深入）”；

其中：

• a 和 d 主导水平/垂直缩放，也参与旋转和倾斜
• b 和 c 控制倾斜（shear）：b 是垂直方向对 x 的依赖（竖向倾斜），c 是水平方向对 y 的依赖（横向倾斜）
• e 和 f 是平移分量：等效于在缩放/旋转/倾斜后，整体沿 x 轴移动 e、y 轴移动 f

常见操作如何映射到矩阵参数

每次调用 scale(sx, sy)、rotate(θ)、translate(tx, ty) 或 transform(a,b,c,d,e,f)，Canvas 都会把对应的基础矩阵右乘到当前变换矩阵上（注意：顺序重要，变换是后叠加的）。

基础矩阵示例：

• 缩放：[sx, 0, 0, sy, 0, 0]
• 旋转（弧度 θ）：[cosθ, sinθ, -sinθ, cosθ, 0, 0]
• 平移：[1, 0, 0, 1, tx, ty]

例如先旋转再平移，等价于 rotate(θ); translate(tx, ty)，对应矩阵为：
平移矩阵 × 旋转矩阵（注意乘法顺序！Canvas 内部按调用顺序右乘）。

为什么 save()/restore() 和 resetTransform 很关键

变换矩阵是累积的。连续调用 rotate 5 次，角度会叠加；连续 scale(2) 三次，最终缩放是 8 倍。若不重置，后续所有绘制都会受此影响。

• ctx.save() 保存当前矩阵（连同其他状态）到栈中
• ctx.restore() 恢复最近一次保存的矩阵
• ctx.resetTransform() 直接将矩阵重置为单位矩阵 [1,0,0,1,0,0]，即取消所有变换

推荐习惯：对局部复杂变换（如画一个旋转的图标），用 save → transform → draw → restore 封装，避免污染全局坐标系。

手动设置矩阵：setTransform vs transform

ctx.transform(a,b,c,d,e,f) 是“在当前矩阵基础上右乘新矩阵”，易造成意外叠加。
ctx.setTransform(a,b,c,d,e,f) 则是**完全替换**当前矩阵，更可控，适合精确控制。

例如想让后续绘制严格以某点为原点、按指定角度和缩放绘制，直接 setTransform 设置完整矩阵，比多次 translate+rotate+scale 更可靠、更高效。