canvas图像变形本质是坐标系变换而非图像移动；旋转需平移原点至中心再rotate并restore；倾斜用transform矩阵实现；扭曲无原生支持，需分块模拟或升级webgl/css。
Canvas 图像旋转、倾斜与扭曲，本质上不是“动图”，而是通过操作渲染上下文的坐标系来实现视觉变形。关键在于理解：所有变换都作用于坐标系，而非图像本身；默认原点在左上角（0,0），绕任意点变换必须先平移、再变换、最后复位。
Canvas 旋转：绕中心或任意点转动图像
rotate() 只接受弧度值，且永远绕当前坐标系原点旋转。直接调用会导致图像飞出画布或位置错乱。
正确做法是三步闭环：
- 调用
ctx.save()保存当前状态 - 用
ctx.translate(cx, cy)将原点移到目标旋转中心（如图像中心） - 执行
ctx.rotate(angle * Math.PI / 180)，再用ctx.drawImage()绘制（此时(0, 0)就是中心） - 最后
ctx.restore()清除影响，避免污染后续绘制
例如，将一张宽 160、高 192 的气泡图绕其中心（位于画布坐标 (512, 220)）顺时针转 45°：
ctx.save(); ctx.translate(512 + 80, 220 + 96); // 移到图像中心 ctx.rotate(45 * Math.PI / 180); ctx.drawImage(img, -80, -96, 160, 192); // 以新原点为中心绘制 ctx.restore();
注意：文字或细线旋转后易模糊，建议避开小字号，或用 CSS transform 对 canvas 整体旋转（仅适用于整图，不适用局部）。
Canvas 倾斜（Shear）：水平/垂直方向拉伸变形
Web Canvas 没有 skew() 方法，需用 transform() 或 setTransform() 手动设置仿射变换矩阵。
- 水平倾斜（X shear）：矩阵为
[1, 0, k, 1, 0, 0]，k是倾斜系数（如0.3表示约 17° 斜切） - 垂直倾斜（Y shear）：矩阵为
[1, k, 0, 1, 0, 0]
若要绕某点 (cx, cy) 倾斜，步骤为：
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
-
ctx.save() -
ctx.translate(cx, cy) -
ctx.transform(1, k, 0, 1, 0, 0)（垂直倾斜示例） -
ctx.translate(-cx, -cy) -
ctx.drawImage(...) -
ctx.restore()
也可一步用 setTransform 设置完整矩阵，但组合调用更直观、容错性高。
Canvas 扭曲（Distortion）：非线性变形的替代方案
标准 Canvas 2D API 不支持真正的像素级扭曲（如四边形 warp、透视变形）。所谓“扭曲”效果通常有三种现实路径：
- ✅ 用
transform()实现双线性近似：对图像分块，每块单独倾斜+缩放，拼接模拟轻微扭曲（适合 banner 标题等） - ✅ 叠加多个
drawImage()+ 不同transform：比如上半部倾斜 + 下半部反向倾斜，制造波浪感 - ❌ 避免尝试
createPattern或clip模拟扭曲：失真严重、性能差、不可控
真正需要网格扭曲或透视，应升级技术栈：
- 使用 WebGL（Three.js / PIXI.js）做顶点级变形
- 或导出为
<img>后用 CSStransform: perspective()+rotateX/Y做伪 3D（仅限整图）
状态管理是成败关键
不加控制的连续 translate/rotate 会让坐标系持续偏移，最终绘图全部错位。务必：
- 每次复杂变换前
ctx.save() - 绘制完成后立即
ctx.restore() - 避免依赖
ctx.setTransform(1,0,0,1,0,0)复位——它会清除所有累积状态，包括字体、线宽等，容易引发样式丢失
如果只是临时重置变换（保留样式），可用：
ctx.resetTransform(); // 更安全，只清变换，不碰样式
（兼容性：Chrome 67+、Firefox 71+、Safari 16.4+，旧版需 fallback 到 setTransform(1,0,0,1,0,0)）
不复杂但容易忽略。
