本文讲解 canvas 的 `scale()` 变换与画布物理尺寸（`width`/`height` 属性）的本质区别，指出仅调用 `ctx.scale()` 不会改变 canvas 元素的实际渲染尺寸，必须同步调整 `canvas.width`/`height` 并配合 css `overflow: auto` 才能实现精准缩放与自适应滚动。
在 Web 图像查看场景中（如类 Photoshop 的缩放预览），开发者常误以为调用 ctx.scale(0.5, 0.5) 就能让整个 canvas “缩小一半”，从而适配父容器并自动隐藏多余滚动条——但实际并非如此。根本原因在于：Canvas 的 scale() 是绘图上下文的坐标变换操作，它只影响后续绘制内容的几何映射，而完全不改变 。
例如，原始图像为 240×157，你设置
✅ 正确做法是 “双同步”：
- 动态重设 canvas 物理尺寸：按缩放比例更新 canvas.width 和 canvas.height；
- 重置绘图上下文并重绘：清除旧内容，应用新缩放，再绘制图像（注意：此时 drawImage 参数应保持原始图像尺寸，因 canvas 缓冲区已缩放）。
以下是可直接运行的完整示例：
⚠️ 关键注意事项：
- 不要混用 px 单位：
- overflow: auto 而非 scroll：auto 仅在内容溢出时显示滚动条，避免无意义的空白滚动区域。
- 缩放后重绘必须 clearRect + scale + drawImage：否则旧像素残留，且 scale() 累积会导致失真。
- 性能提示：高频缩放建议使用 requestAnimationFrame 节流，并对极小缩放（如
通过理解 canvas 的“设备像素缓冲区”与“CSS 渲染尺寸”的分离机制，你就能精准控制缩放行为——既保持图像清晰度，又实现专业级的滚动交互体验。
