图像旋转倾斜与扭曲的Canvas像素矩阵变换
很多开发者初次尝试Canvas图像变形时，常误以为是在“移动”或“拉伸”图像本身。实际上，整个过程中我们操作的始终是坐标系统，图像只是一个被动跟随的“贴纸”。核心要点归结为三个：旋转、倾斜与扭曲，各有不同玩法，但底层逻辑一致——所有变换都作用于坐标系，默认原点位于左上角(0,0)。若想绕任意点变形，必须先平移、再变换、最后复位。
必须强调一个核心认知：Canvas的旋转、倾斜、扭曲，并不是让图像“动起来”，而是通过修改渲染上下文的坐标系来制造视觉变形。简单说，你操作的永远是坐标原点、坐标轴的方向和缩放比例，图像就像一张贴纸，坐标系怎么变它就怎么跟。默认原点固定在左上角(0,0)，要让图像绕自己中心旋转，就必须先移动原点，完成后再复位——这是所有变换的铁律。
Canvas 旋转：绕中心或任意点转动图像
旋转操作中，很多人一上来就用rotate()，结果图像直接飞出去了——因为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、透视变形这类效果，原生API无法实现。所谓“扭曲”效果，在实际项目中通常有三种实现方式：
- 用
transform()实现双线性近似：将图像分成若干小块，每块单独倾斜并缩放，拼接起来模拟轻微扭曲，适合banner标题等场景 - 叠加多个
drawImage()+ 不同transform：例如上半部倾斜、下半部反向倾斜，制造波浪感 - 避免使用
createPattern或clip模拟扭曲：失真严重、性能差、不可控，得不偿失
如果确实需要网格扭曲或透视效果，建议升级技术栈：
- 用WebGL（Three.js / PIXI.js）做顶点级变形
- 或者将Canvas导出为
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)）
看似不复杂，却容易被忽略——但正是这一步，决定了你的图像变形能否稳定跑通。