Canvas图形变换进阶 setTransform矩阵变换教程

要用 setTransform 实现稳定、可预测的 Canvas 图形变换，关键不在于叠加操作，而在于每次从干净的单位矩阵出发，直接设定你想要的全部变换效果——这才是避免混乱的“一招鲜”。

很多人在做 Canvas 图形变换时，习惯用 translate、rotate、scale 一步步堆叠，但这样一来，每一步的偏移和旋转都会累积在一起，稍微复杂点的场景就容易失控。而 setTransform 的哲学正好相反：它先清空所有历史状态（重置为单位矩阵 [1,0,0,1,0,0]），再直接应用你传入的这组参数。简单说，它不依赖之前的状态，也不累积误差。

setTransform 参数详解与矩阵变换原理

setTransform(a, b, c, d, e, f) 的六个参数各自对应一个变换维度：a 和 d 控制 x、y 方向的缩放；b 和 c 控制倾斜（旋转正是通过它们的组合来实现）；而 e 和 f 是最终平移量（单位像素），注意这个平移量已经包含了坐标系旋转或缩放后的偏移修正。所以，只要一次性给出正确的矩阵参数，就能同时实现旋转、缩放和平移，不用分三步走。

绕任意点旋转或缩放的一步式实现

想让图形绕自身中心 (cx, cy) 旋转 θ 弧度，传统的做法是 translate(cx, cy) → rotate(θ) → translate(-cx, -cy)，三步操作加上后续绘制，容易出错。其实用 setTransform 一步就能搞定——直接用公式算出参数：

• a = cos(θ)，b = sin(θ)
• c = -sin(θ)，d = cos(θ)
• e = cx − cx×cos(θ) + cy×sin(θ)
• f = cy − cx×sin(θ) − cy×cos(θ)

举个例子：绕点 (100, 80) 顺时针旋转 45°（即 −π/4 弧度），把这四个数值代入公式，再调用 setTransform，后续的 draw 操作就会自动在新坐标系下绘制。整个过程干净利落，没有累积误差，也不需要担心之前的状态。

避免变换状态污染：save/restore 最佳实践

Canvas 的变换状态是全局持续的，一次 setTransform 会影响之后的所有绘制，直到被覆盖或重置。如果不加保护，文字、边框、图标等不同元素很容易互相干扰。所以最稳妥的做法是：

• 每次使用变换前加 ctx.sa ve()
• 设置变换时立即调用 ctx.setTransform(...)
• 绘图完成后必须跟 ctx.restore()

这个习惯一旦养成，图形错位的问题就能减少九成。很多人调试半天，最后发现就是漏了 sa ve/restore。

setTransform() 与 transform() 的核心区别

transform() 是“在已有变形上再叠加”，矩阵右乘，操作越多歪得越厉害；而 setTransform() 是“彻底换一套规则”，左乘单位矩阵，结果完全由你掌控。做动画或频繁更新场景时，优先选 setTransform()；如果需要重复使用同一套变换，最好封装成一个函数，内部包含 sa ve、setTransform、restore。如果想临时清空所有变换，直接用 ctx.resetTransform()（等价于 setTransform(1,0,0,1,0,0)）。