Canvas的rotate()旋转坐标系而非图形，须用save()/restore()隔离状态；角度单位为弧度，需归一化；绕任意点旋转需先translate再rotate；性能优化应预设样式、缓存静态图形。
Canvas的rotate()方法本身不直接“旋转图形”，而是旋转整个绘图上下文的坐标系——这是理解其动画应用的关键。
旋转前必须用save()和restore()隔离变换状态
Canvas的变换（包括旋转）是累积且全局生效的。若不保存/恢复状态，后续所有绘制都会受上一次旋转影响，导致位置错乱、角度叠加、图形漂移。
- 每次需要独立旋转一个对象前，先调用
ctx.save() - 执行
ctx.translate()定位中心点 →ctx.rotate(angle)→ 绘制图形 - 绘制完成后立即调用
ctx.restore()，还原为原始坐标系
例如画一个绕自身中心顺时针匀速旋转的矩形：
function drawRotatingRect(x, y, width, height, angle) {
ctx.save();
ctx.translate(x + width/2, y + height/2); // 移动原点至矩形中心
ctx.rotate(angle);
ctx.fillRect(-width/2, -height/2, width, height); // 以新原点为中心绘制
ctx.restore();
}旋转角度必须用弧度，且注意方向与增量控制
Canvas中rotate(angle)的angle单位是弧度，不是度数；正角度为顺时针（与数学惯例相反）。动画中需持续更新角度值，但要注意避免角度无限增大导致精度下降或溢出。
- 使用
angle = (angle + delta) % (Math.PI * 2)做模运算归一化 - 更稳妥的做法是用
angle += delta; if (angle >= Math.PI * 2) angle -= Math.PI * 2; - 常见错误：直接传入
45想转45°——实际会转45弧度（≈2578°），图形瞬间“疯转”
结合translate()实现绕任意点旋转（非左上角）
Canvas默认绕画布原点(0,0)旋转。要让图形绕自身中心、某顶点或屏幕某坐标旋转，必须手动平移坐标系：
- 先
translate(targetX, targetY)把原点移到旋转中心 - 再
rotate(angle) - 最后用负偏移绘制图形（如绕中心旋转，则从
(-w/2, -h/2)开始画） - 切记：顺序不可颠倒，
rotate永远作用于当前坐标系，平移必须在旋转前完成
性能提示：避免在动画循环中重复创建路径或重设样式
旋转动画常搭配fillStyle、strokeStyle、阴影等设置。这些属性设置开销小，但若在每帧都重复赋值（尤其字符串字面量），仍会轻微拖慢渲染。
- 将不变的样式（如固定颜色、线宽）提到动画循环外预先设置
- 对频繁旋转的简单图形（如指针、图标），可预生成
ImageBitmap或离屏canvas缓存，再用drawImage()旋转绘制（适合静态外观+动态角度） - 纯Canvas路径绘制（
beginPath+arc等）比drawImage更灵活，适合需实时变形的场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
