canvas 的 translate() 本质是移动坐标系原点而非图形本身；调用后所有绘图以新原点为参考，配合 save/restore 可模块化控制变换，rotate/scale 均绕当前原点进行，需先平移锚点再执行。
Canvas 中的 translate() 不是移动图形，而是移动坐标系原点——这是所有平移、旋转、缩放操作的底层逻辑。用对了，绘图更直观；用错了，图形“消失”或位置错乱。
translate 的本质是重定义 (0, 0)
调用 ctx.translate(x, y) 后，画布上原本的点 (x, y) 就成了新的坐标原点。之后所有绘图命令（如 fillRect(0, 0, 10, 10)）都以这个新原点为参考。
- 不是“把矩形拖到 (x, y)”，而是让矩形画在“新 (0, 0)”的位置
- 连续调用
translate(10, 20); translate(5, -5)等效于一次translate(15, 15) - 原点偏移是累加的，不重置就会持续影响后续所有绘制
配合 save/restore 实现模块化绘制
多个图形各自需要独立坐标系时，save() 和 restore() 是必备搭档。它们确保每次平移只作用于当前图形，互不干扰。
- 先
ctx.save()记录当前变换状态 - 再
ctx.translate(centerX, centerY)把原点移到目标位置 - 接着用相对坐标绘图（例如圆心在 (0, 0)，矩形中心在 (-w/2, -h/2)）
- 最后
ctx.restore()恢复原始坐标系
为旋转和缩放提前准备锚点
rotate() 和 scale() 都绕当前坐标系原点进行。想让图形绕自身中心转或缩，必须先用 translate 把中心“搬”到原点。
- 绕矩形中心旋转：先
translate(x + w/2, y + h/2)，再rotate(angle)，绘制时用fillRect(-w/2, -h/2, w, h) - 绕图片中心缩放：先
translate(imgX + imgW/2, imgY + imgH/2)，再scale(sx, sy)，最后drawImage(img, -imgW/2, -imgH/2) - 绕任意点 (px, py) 变换：直接
translate(px, py)，其余操作按该点为 (0, 0) 展开
调试与重置的实用习惯
当图形位置异常、动画漂移或变换叠加失控时，往往源于未清理的坐标系偏移。
- 临时重置全部变换：用
ctx.setTransform(1, 0, 0, 1, 0, 0)—— 它会清空所有平移、旋转、缩放，回到初始状态 - 避免隐式依赖：不要在函数间传递“当前已平移”的状态，每个绘图块应自包含
- 可视化验证：在平移后画个
fillRect(0, 0, 2, 2)，就能看到新原点实际落在画布哪里
