Canvas 像素矩阵变换：图像旋转 倾斜与扭曲

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) 倾斜，步骤为：

• 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> 后用 CSS transform: 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)）

不复杂但容易忽略。