rotate()绕画布原点(0,0)旋转而非图形中心，需用translate()移原点、rotate()、再translate()复位或setTransform()设矩阵，配合save()/restore()避免状态污染。
canvas rotate() 为什么转歪了？
因为 rotate() 永远绕画布原点（左上角 0,0）旋转，不是绕图形中心——这是绝大多数人第一眼就踩的坑。
常见错误现象：ctx.rotate(Math.PI / 4); ctx.fillRect(100, 100, 50, 30); 结果矩形飞出画布、位置完全错乱。
正确做法是「移动原点 → 旋转 → 绘制 → 恢复」三步闭环：
- 用
ctx.translate(x, y)把坐标系原点移到你想旋转的中心点（比如矩形中心） - 再调
rotate()，此时旋转轴就是这个新原点 - 绘制时，把图形“摆”在 (0, 0) 附近（例如
fillRect(-25, -15, 50, 30)表示以原点为中心的矩形） - 最后务必
ctx.setTransform(1, 0, 0, 1, 0, 0)或ctx.restore()清理状态，否则后续所有绘图都会被带偏
想绕任意点旋转，必须手动算矩阵？
不用。Canvas 2D 上下文本身不暴露变换矩阵的读写接口（currentTransform 是只读的），但你可以用 setTransform() 直接设完整矩阵——它比连续调 translate/rotate 更可控，也更容易复位。
立即学习“前端免费学习笔记（深入）”；
绕点 (cx, cy) 顺时针转 θ 的等效矩阵是：
ctx.setTransform( Math.cos(θ), Math.sin(θ), -Math.sin(θ), Math.cos(θ), cx - cx * Math.cos(θ) + cy * Math.sin(θ), cy - cx * Math.sin(θ) - cy * Math.cos(θ) );
但实际中更推荐组合调用，清晰不易错：
ctx.save()ctx.translate(cx, cy)ctx.rotate(θ)-
ctx.translate(-cx, -cy)← 这步把图形“拉回”到世界坐标系对应位置 - 绘制
ctx.restore()
rotate() 后文字变形、模糊怎么办？
旋转会触发 Canvas 的非整数像素采样，尤其小字号文字或细线，容易发虚、锯齿加重。
这不是 bug，是抗锯齿在起作用。关键影响因素：
- 旋转角度不是 90° 倍数时，浏览器必须做仿射重采样，质量取决于渲染后端（Chrome/Safari 差异明显）
-
imageSmoothingEnabled = false对文字无效，只影响drawImage() - 避免对单个文字频繁旋转；批量旋转时，优先考虑 CSS transform + DOM 元素，Canvas 更适合图形/动画主体
临时缓解：把文字渲染到离屏 <canvas></canvas>（尺寸放大 2x），再缩放绘制回来，能提升清晰度，但代价是内存和性能。
Canvas 变换是累加的，为什么 save()/restore() 有时没用？
因为 save() 只保存当前变换矩阵、全局 alpha、合成模式等状态，不保存已绘制内容。如果在 save() 前已经调过 rotate() 且没 restore()，那后续所有 save() 都继承那个歪掉的状态。
典型误用场景：
- 在循环里反复
save()却漏了配对restore()→ 状态栈爆炸，最终restore()失效或报错 - 用
setTransform(1,0,0,1,0,0)手动重置后，再save()—— 这没问题；但若重置前已save()，再restore()就会回到那个歪的旧状态 - 多个 canvas 共享同一个 2D context 实例（极少见但可能）→
save()是实例级的，跨 canvas 不隔离
最稳的写法：每个独立旋转操作都包在 save() / restore() 里，哪怕多套一层。
