canvas等比缩放关键在于坐标计算与视图转换协同：需结合scale()、translate()处理缩放中心，同步调整canvas物理尺寸并重置变换矩阵，鼠标交互需反向换算坐标，图像缩放优先用drawimage参数控制。
Canvas 实现等比例缩放图形，关键不在“画多大”，而在于“怎么算坐标”和“在哪画”。视图转换不是单纯调用 ctx.scale() 就完事，它涉及原始坐标、缩放中心、画布物理尺寸与 CSS 渲染尺寸的协同关系。处理不好，会出现图像偏移、鼠标定位错乱、滚动条异常或缩放后内容被裁切等问题。
缩放本质是坐标系变换
Canvas 的 scale(sx, sy) 并不改变画布像素缓冲区大小，只是让后续所有绘图命令（如 drawImage、fillRect）的输入坐标按比例映射到实际像素位置。比如 ctx.scale(2, 2) 后，ctx.fillRect(10, 10, 20, 20) 实际绘制的是从 (20, 20) 开始、宽高各 40 像素的矩形。
- 缩放操作影响的是“逻辑坐标 → 物理像素”的映射关系，不是 DOM 元素尺寸
- 多次调用
scale()会叠加，需用ctx.setTransform(1, 0, 0, 1, 0, 0)重置 - 若未重置，再画文字或路径时，字体大小、线宽也会被同比例放大/缩小
等比缩放必须同步调整画布物理尺寸
仅靠 ctx.scale() 无法让 canvas 自动适配容器大小。浏览器仍按 canvas.width 和 canvas.height 值分配位图内存，并以该尺寸参与布局计算。例如：canvas 原为 800×600，缩放 0.5 后若不改属性，它仍占 800×600 CSS 像素空间，导致溢出。
- 要实现“视觉缩放 + 容器自适应”，必须重新赋值
canvas.width和canvas.height：新宽 = 原宽 × 缩放比，新高 = 原高 × 缩放比 - 重设尺寸会清空画布，需在重绘前调用
ctx.setTransform(1, 0, 0, 1, 0, 0)重置变换矩阵 - 外层容器应设
overflow: auto，并清除 canvas 默认 margin（如display: block）
以鼠标为中心缩放需坐标偏移补偿
用户希望“滚轮靠近某点放大”，这要求缩放中心落在鼠标位置，而非默认左上角。实现逻辑是：先平移画布，使鼠标点对齐原点；再缩放；最后反向平移回原位。
- 获取鼠标相对于 canvas 左上角的坐标
(mx, my) - 执行
ctx.translate(mx, my)→ctx.scale(s, s)→ctx.translate(-mx, -my) - 注意：此操作作用于绘图上下文，不影响 canvas 物理尺寸；若要持久化缩放效果（如保存状态），需记录当前缩放比和偏移量
- 后续鼠标交互（如拖拽）坐标也需反向换算：真实画布坐标 = (鼠标坐标 − 偏移) / 缩放比
等比缩放图像的推荐做法
对一张图片做等比缩放到指定区域（如填满 canvas 但不拉伸），优先使用 drawImage() 参数控制，而非 scale()。这样既保持图像清晰度，又避免上下文污染。
- 先计算缩放比：
scale = Math.min(targetWidth / img.width, targetHeight / img.height) - 再算目标宽高：
dw = img.width * scale，dh = img.height * scale - 居中绘制：
x = (targetWidth - dw) / 2，y = (targetHeight - dh) / 2 - 调用
ctx.drawImage(img, x, y, dw, dh)，全程不触碰scale()或画布尺寸
