transform 是矩阵右乘叠加，settransform 是重置后直接赋值；前者依赖历史状态、顺序敏感，后者完全可控、无累积误差；二者均需 save/restore 隔离以避免全局坐标系污染。
Canvas 的 transform 和 setTransform 都作用于同一个 2D 仿射变换矩阵，但数学行为截然不同：前者是矩阵右乘（叠加），后者是直接赋值（替换）。理解这个区别，关键在于看清它们如何操作这个六参数矩阵 [a, b, c, d, e, f] —— 它对应标准的 3×3 仿射矩阵：
变换矩阵的数学结构
Canvas 实际使用的是压缩表示的 2×3 矩阵：
[a c e][b d f]
[0 0 1]
它将原始点 (x, y) 映射为新坐标 (x′, y′)：
- x′ = a·x + c·y + e
- y′ = b·x + d·y + f
其中：
• a 和 d 主导缩放（也参与旋转）
• b 和 c 控制倾斜与旋转耦合项
• e 和 f 是平移分量，但已受前面线性变换影响
transform()：右乘叠加，状态累积
每次调用 ctx.transform(a,b,c,d,e,f)，相当于把新矩阵 Mnew 右乘到当前矩阵 Mcurrent 上：
这意味着顺序至关重要。例如：
- 先
rotate(θ)再translate(tx, ty)≠ 先平移再旋转 - 连续两次
scale(2)得到总缩放 4 倍（2×2） - 5 次
rotate(Math.PI/6)等效于一次rotate(5*Math.PI/6)
setTransform()：重置后赋值，完全可控
ctx.setTransform(a,b,c,d,e,f) 会先将当前矩阵重置为单位矩阵 [1,0,0,1,0,0]，再直接设为传入值：
它不依赖历史状态，无累积误差。适合精确构造复合效果，例如绕点 (cx, cy) 旋转 θ：
a = cos(θ), b = sin(θ)c = -sin(θ), d = cos(θ)e = cx − cx·cos(θ) + cy·sin(θ)f = cy − cx·sin(θ) − cy·cos(θ)
一步到位，无需 save/translate/rotate/translate/-restore 三段式。
为什么必须搭配 save/restore？
变换矩阵是绘图上下文的全局状态。无论用哪个方法，一旦生效，后续所有绘制（直到被覆盖或重置）都按新坐标系解释。漏掉隔离会导致：
- 文字位置偏移（文字本身不受 transform 影响，但坐标系变了）
- 多个图形相互干扰（前一个 rotate 持续影响后一个 fillRect）
- 动画跳变（历史缩放未清除，帧间矩阵持续叠加）
因此规范写法总是：
ctx.save()-
ctx.setTransform(...)或ctx.transform(...) // 绘图ctx.restore()
