Canvas 缩放与尺寸关系详解：实现可控缩放的图像查看器

本文讲解 canvas 的 `scale()` 变换与画布物理尺寸（`width`/`height` 属性）的本质区别，指出仅调用 `ctx.scale()` 不会改变 canvas 元素的实际渲染尺寸，必须同步调整 `canvas.width`/`height` 并配合 css `overflow: auto` 才能实现精准缩放与自适应滚动。

在 Web 图像查看场景中（如类 Photoshop 的缩放预览），开发者常误以为调用 ctx.scale(0.5, 0.5) 就能让整个 canvas “缩小一半”，从而适配父容器并自动隐藏多余滚动条——但实际并非如此。根本原因在于：Canvas 的 scale() 是绘图上下文的坐标变换操作，它只影响后续绘制内容的几何映射，而完全不改变 元素自身的固有尺寸（即 canvas.width 和 canvas.height 属性值）。

例如，原始图像为 240×157，你设置 ，此时 canvas 的位图缓冲区就是 240×157 像素。即使执行 ctx.scale(0.5, 0.5)，绘制的图像虽被压缩显示（逻辑坐标系缩放），但 canvas 元素仍占据 240×157 CSS 像素空间，导致其远超外层 120×78px 的 #whole 容器，触发不必要的滚动条。

✅ 正确做法是 “双同步”：

1. 动态重设 canvas 物理尺寸：按缩放比例更新 canvas.width 和 canvas.height；
2. 重置绘图上下文并重绘：清除旧内容，应用新缩放，再绘制图像（注意：此时 drawImage 参数应保持原始图像尺寸，因 canvas 缓冲区已缩放）。

以下是可直接运行的完整示例：

⚠️ 关键注意事项：

• 不要混用 px 单位： 是非法写法（HTML width 属性为纯数字），应写作 width="240"；CSS 中才用 px。
• overflow: auto 而非 scroll：auto 仅在内容溢出时显示滚动条，避免无意义的空白滚动区域。
• 缩放后重绘必须 clearRect + scale + drawImage：否则旧像素残留，且 scale() 累积会导致失真。
• 性能提示：高频缩放建议使用 requestAnimationFrame 节流，并对极小缩放（如

通过理解 canvas 的“设备像素缓冲区”与“CSS 渲染尺寸”的分离机制，你就能精准控制缩放行为——既保持图像清晰度，又实现专业级的滚动交互体验。