Canvas 的 translate 配合 rotate 实现绕图形中心旋转：先用 translate 将坐标系原点移至图形中心，再 rotate 使旋转轴落在中心，最后用负偏移绘制确保中心对齐。
Canvas 的 translate 本身不直接实现旋转，而是配合 rotate 实现“绕图形中心旋转”的关键位移步骤：先将坐标系原点移到图形中心，再旋转，最后绘制——这是标准的“平移–旋转–反向平移”逻辑的核心前两步。
为什么必须用 translate 配合 rotate？
Canvas 的 rotate(angle) 总是绕当前坐标系原点（即画布左上角 (0,0)）旋转。若直接调用，矩形、圆形等会绕左上角转，而非自身中心。要让它绕中心转，就得先把原点“搬”到图形中心位置。
例如：一个宽 100、高 60 的矩形，左上角在 (200, 150)，其中心在 (250, 180)。想让它绕中心旋转，就要先执行：ctx.translate(250, 180);
此时原点变成 (250, 180)，再调用 rotate，旋转轴就落在矩形中心了。
完整中心旋转三步法（含 translate）
以绘制并旋转一个矩形为例，标准流程如下：
-
保存当前状态：
ctx.save();（避免影响后续绘制） -
平移到图形中心：
ctx.translate(centerX, centerY); -
执行旋转：
ctx.rotate(angleInRadians); -
绘制图形（以新原点为基准）：比如
ctx.fillRect(-width/2, -height/2, width, height);（负偏移确保中心在原点） -
恢复状态：
ctx.restore();
常见易错点与建议
很多初学者忽略坐标偏移方向，导致图形“飞走”或旋转异常：
立即学习“前端免费学习笔记（深入）”；
- 绘制时未用负半宽/半高定位：例如矩形宽100，应在 (-50, -30) 开始画，否则图形整体偏右下
- 忘记
save()/restore()：旋转和平移会持续影响后续所有绘图，造成连锁偏移 - 角度单位错误：Canvas 使用弧度，不是度数，需转换：
angle * Math.PI / 180 - 动态旋转时，每次都要重新 translate 到当前中心——不能只平移一次就反复 rotate（除非中心不变）
一个可复用的封装示例
把逻辑封装成函数更清晰：
function drawRotatedRect(ctx, x, y, width, height, angle) {
const cx = x + width / 2;
const cy = y + height / 2;
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(angle);
ctx.fillRect(-width/2, -height/2, width, height);
ctx.restore();
}调用：drawRotatedRect(ctx, 200, 150, 100, 60, 45 * Math.PI/180);
