本文讲解 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> 元素自身的固有尺寸（即 canvas.width 和 canvas.height 属性值）。
例如，原始图像为 240×157，你设置 <canvas width="240" height="157">，此时 canvas 的位图缓冲区就是 240×157 像素。即使执行 ctx.scale(0.5, 0.5)，绘制的图像虽被压缩显示（逻辑坐标系缩放），但 canvas 元素仍占据 240×157 CSS 像素空间，导致其远超外层 120×78px 的 #whole 容器，触发不必要的滚动条。
✅ 正确做法是 “双同步”：
- 动态重设 canvas 物理尺寸：按缩放比例更新 canvas.width 和 canvas.height；
- 重置绘图上下文并重绘：清除旧内容，应用新缩放，再绘制图像（注意：此时 drawImage 参数应保持原始图像尺寸，因 canvas 缓冲区已缩放）。
以下是可直接运行的完整示例：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="zoom" type="range" min="1" max="10" value="2" step="0.1">
<div id="whole">
<canvas id="test"></canvas>
</div>
<style>
#whole {
border: 1px solid #ccc;
width: 120px;
height: 78px;
overflow: auto; /* 关键：auto 自动控制滚动条显隐 */
}
canvas {
margin: 0;
display: block;
image-rendering: -webkit-optimize-contrast; /* 防止缩放模糊 */
}
</style>
<script>
const canvas = $('#test')[0];
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town%2C_c._1900.jpg?dl=0";
// 初始尺寸（原始图像分辨率）
const baseWidth = 240;
const baseHeight = 157;
// 初始化画布
function initCanvas() {
canvas.width = baseWidth;
canvas.height = baseHeight;
ctx.clearRect(0, 0, baseWidth, baseHeight);
ctx.drawImage(img, 0, 0, baseWidth, baseHeight);
}
img.onload = initCanvas;
// 缩放控制
$('#zoom').on('input', function() {
const scale = parseFloat(this.value) / 2; // 例：value=2 → scale=1.0；value=4 → scale=2.0
const w = Math.round(baseWidth * scale);
const h = Math.round(baseHeight * scale);
// ✅ 步骤1：重设 canvas 物理尺寸（清空缓冲区）
canvas.width = w;
canvas.height = h;
// ✅ 步骤2：重置上下文（清除+缩放+重绘）
ctx.clearRect(0, 0, w, h);
ctx.scale(scale, scale); // 应用缩放，使 drawImage 按原始坐标绘制
ctx.drawImage(img, 0, 0, baseWidth, baseHeight);
});
</script>⚠️ 关键注意事项：
- 不要混用 px 单位：<canvas width="240px"> 是非法写法（HTML width 属性为纯数字），应写作 width="240"；CSS 中才用 px。
- overflow: auto 而非 scroll：auto 仅在内容溢出时显示滚动条，避免无意义的空白滚动区域。
- 缩放后重绘必须 clearRect + scale + drawImage：否则旧像素残留，且 scale() 累积会导致失真。
- 性能提示：高频缩放建议使用 requestAnimationFrame 节流，并对极小缩放（如 <0.1）做降级处理。
通过理解 canvas 的“设备像素缓冲区”与“CSS 渲染尺寸”的分离机制，你就能精准控制缩放行为——既保持图像清晰度，又实现专业级的滚动交互体验。
