Canvas缩放偏移的根本原因是坐标系变换以默认原点（左上角）为中心，而非图形自身中心；解决方法是通过translate调整缩放基准点，或用setTransform精确控制变换矩阵。
Canvas图形缩放后出现位置偏移，根本原因不是缩放本身出错，而是坐标系变换顺序和基准点没对齐。缩放始终以当前坐标系原点（默认是画布左上角）为中心，若图形不在原点，就会“被拉走”。解决的关键在于控制变换的中心点，而不是硬调坐标。
缩放偏移的本质：原点在哪，缩放就在哪
Canvas所有变换（scale、rotate、transform）都作用于整个坐标系，不是单个图形。当你写：
ctx.scale(2, 2); ctx.fillRect(100, 50, 100, 60);
实际效果是：先将坐标纸按 (0,0) 放大两倍，再在放大后的坐标系里画矩形——此时 (100,50) 已变成屏幕上的 (200,100)，矩形也变大了，但视觉上“跑偏”了，因为它被从原点拉伸了。
绕指定点缩放的三步法（最常用）
要让一个矩形以其中心 (150, 80) 为基准放大 1.8 倍，就得把坐标系“搬过去、缩、搬回来”：
- 用
ctx.translate(150, 80)把原点移到中心点 - 执行
ctx.scale(1.8, 1.8)—— 此时缩放中心就是 (0,0)，即原来 (150,80) - 用
ctx.translate(-150, -150)把原点搬回原位（注意：这里 y 是 -80，不是 -150；示例中应为-150, -80）
完整写法：
ctx.save(); ctx.translate(150, 80); ctx.scale(1.8, 1.8); ctx.translate(-150, -80); ctx.fillRect(100, 50, 100, 60); // 原始位置不变，但已按中心缩放 ctx.restore();
用 setTransform 精确控制，避免叠加误差
当多次 transform() 叠加后矩阵变得复杂，容易偏移，直接重置更可靠。例如：绕点 (x, y) 缩放 sx/sy 的标准矩阵是：
ctx.setTransform(sx, 0, 0, sy, x*(1-sx), y*(1-sy));
这个公式由三步推导而来：平移 (-x,-y) → 缩放 (sx,sy) → 平移 (x,y)，合并后得到平移项 e = x - x*sx = x*(1-sx)，同理 f = y*(1-sy)。它不依赖历史状态，适合动画或交互式缩放。
配合 clip 防止缩放后图形溢出
缩放可能让图形超出画布边界，尤其做局部放大时。可在缩放前定义裁剪区域：
- 先用
ctx.beginPath()+ctx.rect(x,y,w,h)绘制裁剪路径 - 调用
ctx.clip() - 再执行缩放和绘制
这样即使缩放后坐标超限，也只显示在裁剪框内，视觉上更可控。
不复杂但容易忽略：每次缩放操作前想清楚“我想让哪个点不动”，那个点就是你要 translate 到原点的位置。
