Canvas rotate() 绕坐标系原点旋转，默认为左上角（0,0）；需先用 translate() 移动原点至目标点，再 rotate()，最后用相对坐标绘制并 restore() 恢复状态。
Canvas 的 rotate() 方法本身不指定旋转中心，它只按当前坐标系原点旋转——而这个原点默认在画布左上角（0, 0）。所以直接调用 rotate，图形会“绕屏幕角落转”，不是绕自己转。真正控制旋转位置的关键，是用 translate() 提前把原点挪到你想绕着转的那个点。
rotate 只认原点，不管图形在哪
rotate 接收一个弧度值，作用对象是整个坐标系，不是某一个图形。无论你之后画的是矩形、路径还是文字，它们都会按当前坐标系的方向和原点来定位。如果没改过原点，那所有旋转都从（0, 0）出发，图形容易移出视野或错位。
绕图形中心旋转的标准三步
以宽 w、高 h、左上角位于 (x, y) 的矩形为例：
- save()：先保存当前绘图状态，避免影响后续内容
- translate(x + w/2, y + h/2)：把坐标系原点移到矩形中心
- rotate(angle)：此时 rotate 就自然绕该中心旋转
- 绘制时用 fillRect(-w/2, -h/2, w, h)，让图形以新原点为中心展开
- restore()：恢复坐标系，保证后面绘图不受干扰
绕任意点旋转的通用逻辑
不只是中心，你想绕左上角、右下角或画布里任一点旋转，方法一样：
- 算出目标旋转点坐标 (cx, cy)
- 用 translate(cx, cy) 把原点移到那里
- 再 rotate(angle)
- 绘制时坐标要相对于 (0, 0) 写，比如画圆就用 arc(0, 0, r, 0, Math.PI * 2)
- 最后 restore() 清理状态
常见错误与避坑提醒
容易出问题的地方集中在几个细节：
- 忘记 save()/restore()，导致后续所有图形都跟着歪
- rotate 参数用了角度没转弧度，正确写法是 angle * Math.PI / 180
- translate 后绘制仍用原始坐标（比如还写 fillRect(x, y, w, h)），实际该用偏移后的相对坐标
- 多个变换叠加时顺序写反，必须是 translate → rotate → 绘制，不能倒过来
