canvas图形变换本质是重定义坐标系，通过6参数仿射矩阵[a,b,c,d,e,f]映射点(x,y)→(x′,y′)，其中a/d控制缩放、b/c控制倾斜、e/f为平移量，矩阵叠加遵循右乘顺序，推荐save/restore管理局部变换。
Canvas 图形变换不是移动图形本身，而是重新定义坐标系的“尺子”和“方向”。所有绘制都基于当前变换后的坐标系解释，核心是一组 6 个数字组成的仿射变换矩阵 [a, b, c, d, e, f]，它把原始点 (x, y) 映射为新位置 (x′, y′)：
变换矩阵的数学表达式
公式为：
x′ = a·x + c·y + e
y′ = b·x + d·y + f
这个公式源自齐次坐标的 3×3 矩阵乘法（补足第三维为 1），但 Canvas 内部只维护前两行，即 2×3 形式。其中：
- a 和 d 主导缩放：a 控制 x 方向单位长度拉伸，d 控制 y 方向；若 a = d = 1，则无缩放
- b 和 c 控制倾斜：b 是 y 对 x 的依赖（竖向倾斜），c 是 x 对 y 的依赖（横向倾斜）；标准旋转也通过 b = sinθ、c = −sinθ、a = d = cosθ 实现
- e 和 f 是纯平移量：无论前面如何缩放或旋转，最终整体沿 x 移 e、沿 y 移 f
常见几何操作对应的矩阵构造
每种基础变换都对应一个特定矩阵，Canvas 方法如 rotate() 或 scale() 内部就是调用 transform() 注入这些矩阵：
- 平移 (tx, ty) → [1, 0, 0, 1, tx, ty]
- 缩放 (sx, sy) → [sx, 0, 0, sy, 0, 0]
- 旋转 (θ 弧度) → [cosθ, sinθ, −sinθ, cosθ, 0, 0]
- 斜切 (x 向 α°, y 向 β°) → [1, tanβ, tanα, 1, 0, 0]
- 中心对称（关于点 (cx, cy)） 等价于三步：先平移至中心，再缩放 (−1, −1)，最后平移回原位，复合后矩阵为 [−1, 0, 0, −1, 2·cx, 2·cy]
矩阵叠加顺序与实际应用要点
Canvas 每次调用 transform() 都是将新矩阵右乘到当前矩阵上，因此顺序直接影响结果。例如：
- 先
translate(100, 50)再rotate(π/4)：绕点 (100, 50) 旋转 - 反之则先旋转再平移，图形整体偏移且旋转中心仍是原点
- 连续
scale(2)三次 → 整体缩放 8 倍；不重置会持续累积
推荐做法：对局部图形使用 save() → 变换 → 绘制 → restore()；需彻底重置时用 resetTransform() 或 setTransform(1, 0, 0, 1, 0, 0)。
手动控制优于链式调用的典型场景
当需要精确、可复现或动态响应用户输入时，直接设置完整矩阵比多次调用方法更可靠：
- 拖拽控制斜切：监听鼠标位置，实时计算
c = Math.tan(angleX)，然后ctx.setTransform(1, 0, c, 1, 0, 0) - 绕任意点缩放：先算出目标中心 (cx, cy)，再设矩阵为
[sx, 0, 0, sy, cx*(1−sx), cy*(1−sy)] - 动画关键帧插值：在两个矩阵间线性插值各参数（注意角度需转弧度、避免万向节死锁）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
