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 更可靠、更高效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
