Canvas平滑旋转需用弧度制+requestAnimationFrame驱动，配合sin/cos插值或缓动函数实现自然过渡，避免角度累加溢出和重复计算。
Canvas里实现平滑旋转动画，关键不是“转得快”，而是“转得自然”——靠的是三角函数对角度变化的精细控制，而不是简单地 angle += 0.1 然后 rotate(angle) 就完事。真正让旋转看起来顺滑、有惯性、不突兀的，是角度增量与三角关系的协同设计。
角度增量必须配合弧度制和周期性规律
Canvas 的 context.rotate() 接收的是弧度值，而人类习惯用角度思考。直接写 angle += 5（以为是5度）会导致严重偏差，因为 JavaScript 的三角函数全按弧度运算。正确做法是统一用弧度推进：
- 每帧增加一个微小、恒定的弧度量（如
0.03），而非角度量； - 若想按“每秒转30度”来控制，先换算：
30 * Math.PI / 180 ≈ 0.5236弧度/秒，再除以帧率（如60fps →0.5236 / 60 ≈ 0.0087弧度/帧）； - 使用
requestAnimationFrame驱动，确保时间基准稳定，避免setTimeout导致的跳帧或抖动。
用 sin/cos 实现位置驱动的旋转（比如指向鼠标）
单纯匀速转圈容易单调；更常见的“平滑旋转”是指物体朝向随目标动态变化，且过渡柔和。典型场景是箭头始终指向鼠标：
- 计算相对位移：
dx = mouseX - centerX,dy = mouseY - centerY； - 用
Math.atan2(dy, dx)直接得到从物体指向鼠标的弧度角（自动处理象限，比Math.atan(dy/dx)可靠得多）； - 不要直接赋值
rotation = angle，否则会“啪”一下硬转过去。应做插值：-
targetAngle = Math.atan2(dy, dx)； -
currentAngle += (targetAngle - currentAngle) * 0.1;（阻尼系数 0.1 控制响应速度）；
-
- 最终传入
context.rotate(currentAngle)，视觉上就是缓慢、有跟随感的平滑转向。
避免常见卡顿陷阱
- ❌ 每帧
clearRect(0,0,canvas.width,canvas.height)后重绘全部内容 → 大量重复计算+清屏开销； - ✅ 若仅旋转单个图形，可用
save()/restore()隔离变换，不清全画布； - ❌ 角度累加不设界，任其无限增长（如
angle += 0.03运行几万帧后数值精度下降，sin/cos输出异常）； - ✅ 对角度做模运算：
angle = angle % (Math.PI * 2)，或用angle %= TWO_PI（预定义常量）保持数值轻量； - ❌ 在
draw中反复调用Math.sin(angle)和Math.cos(angle)→ 可提前缓存，或用查表法（高频动画时显著提速）。
进阶：带缓动的旋转节奏
纯线性角度增量仍是机械感。加入三角函数本身就能制造缓入缓出效果：
- 把原始时间
t映射为easedT = (1 - Math.cos(t * Math.PI)) / 2;（即 ease-in-out 的余弦缓动）； - 再让目标角度按
easedT插值：rotation = startAngle + (endAngle - startAngle) * easedT； - 这样从静止到转动、再到停止的过程，速度由慢→快→慢，更符合物理直觉。
不复杂但容易忽略。
