canvas通过变换坐标系实现旋转与倾斜：先translate移动原点，再rotate（弧度）实现绕任意点旋转；用transform设置斜切矩阵［1,0,k,1,0,0］或［1,k,0,1,0,0］实现水平/垂直倾斜；组合变换需注意顺序，推荐save/restore隔离影响。
Canvas 本身不直接“旋转图形”，而是通过变换坐标系来实现视觉上的旋转与倾斜效果。关键在于操作 ctx（2D 渲染上下文）的变换矩阵，而不是修改图形对象本身。
旋转图形：围绕指定点转动
Canvas 的 rotate() 总是绕当前坐标系原点（默认为左上角）旋转。要让图形绕自身中心或任意点旋转，必须配合 translate() 移动原点：
- 先调用
ctx.save()保存原始状态，避免影响后续绘制 - 用
ctx.translate(x, y)把原点移到旋转中心（例如矩形中心：cx = x + width/2,cy = y + height/2） - 再调用
ctx.rotate(angle)，angle必须是弧度（如45 * Math.PI / 180） - 此时绘制图形时，坐标需以新原点为参考：例如画居中矩形，用
ctx.fillRect(-width/2, -height/2, width, height) - 最后用
ctx.restore()恢复坐标系，确保其他图形不受干扰
倾斜图形：用 transform 或 setTransform 实现斜切
Canvas 没有直接的 skew() 方法，但可通过 transform() 或 setTransform() 设置仿射变换矩阵实现倾斜（即斜切，shear）：
- 水平倾斜（X 方向错切）：矩阵参数为
[1, 0, k, 1, 0, 0]，其中k = Math.tan(shearAngle) - 垂直倾斜（Y 方向错切）：矩阵参数为
[1, k, 0, 1, 0, 0] - 推荐用
ctx.transform(a, b, c, d, e, f)追加变换（保留之前平移/旋转），或ctx.setTransform(a, b, c, d, e, f)完全重置变换 - 实际应用中，常先
translate到倾斜中心，再transform斜切，最后绘制
组合旋转与倾斜：顺序很重要
变换的执行顺序直接影响结果。Canvas 矩阵是右乘累积的，所以代码书写顺序就是应用顺序：
- 若先旋转再倾斜，图形会按已旋转后的方向被斜切
- 若先倾斜再旋转，斜切轴会随旋转一起转动
- 常用安全做法：每次组合前
save()，组合后restore()；或用setTransform(1,0,0,1,0,0)彻底清空再重建变换 - 调试时可用
ctx.resetTransform()（现代浏览器支持）快速回到单位矩阵
图像和文本也能旋转倾斜
所有绘图操作都受当前变换影响，包括 drawImage() 和 fillText()：
- 加载图片后，在
img.onload中进行变换+绘制，避免异步导致坐标错乱 - 对文字倾斜，同样需先
translate到文字基线中心（注意textBaseline和textAlign设置） - 若只要局部效果，务必包裹在
save()/restore()中，否则后续文字会全部歪斜
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
