canvas 的 transform 方法通过左乘变换矩阵实现高效复合变换，支持缩放、旋转、平移和斜切；settransform() 则完全重置矩阵，适用于精确控制或非标准变形，需注意弧度单位、save/restore 隔离及文字等不受影响。
Canvas 的 transform 方法通过操作当前绘图上下文的变换矩阵，能高效实现图形的复合缩放、旋转、平移甚至斜切，比手动计算每个点坐标更简洁可靠。
理解 transform 的矩阵逻辑
Canvas 使用 2D 仿射变换矩阵（3×3，实际用 6 个参数表示）：
[a, c, e,<br> b, d, f]—— 对应
transform(a, b, c, d, e, f)其中：
•
a/d 控制 x/y 方向缩放•
b/c 控制倾斜（如旋转会同时影响 b 和 c）•
e/f 是 x/y 方向平移（单位：像素）调用
transform() 会在**当前矩阵基础上左乘**新矩阵，适合叠加操作。
实现绕任意点旋转 + 缩放的三步法
直接调 rotate() 或 scale() 默认以画布原点 (0,0) 为基准。要绕图形中心或某点操作，需组合平移：
-
平移画布到目标中心点：用
ctx.translate(x, y) -
执行旋转/缩放：如
ctx.rotate(angle)或ctx.scale(sx, sy) -
反向平移还原坐标系：用
ctx.translate(-x, -y)
例如：让一个矩形绕其中心 (100, 80) 旋转 45° 并放大 1.5 倍：
ctx.save();<br>ctx.translate(100, 80);<br>ctx.rotate(Math.PI / 4);<br>ctx.scale(1.5, 1.5);<br>ctx.translate(-100, -80);<br>ctx.fillRect(50, 30, 100, 60); // 原始位置<br>ctx.restore();
用 setTransform() 重置并精确控制矩阵
当需要跳过历史变换、从零开始设置，或做非标准变形（如镜像、斜切），优先用 setTransform(a,b,c,d,e,f) —— 它会**完全替换**当前矩阵，不叠加：
- 绕原点顺时针旋转 30°：
ctx.setTransform(Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r), 0, 0) - 水平翻转（镜像）：
ctx.setTransform(-1, 0, 0, 1, 0, 0) - 沿 x 轴斜切 15°：
ctx.setTransform(1, 0, Math.tan(Math.PI/12), 1, 0, 0)
注意角度单位是弧度，Math.PI / 180 可转角度。
避免常见陷阱
• 别漏掉 save()/restore()：变换会持续影响后续所有绘制，不隔离易出错
• rotate() 参数是弧度，不是度数：45° → Math.PI / 4
• transform() 是叠加，setTransform() 是重置：混用时顺序和意图必须清晰
• 文字、阴影、线条宽度不受 transform 影响：它们基于原始坐标系渲染，缩放后文字可能模糊，建议用 CSS 缩放 canvas 元素本身或改用路径+fillText
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
