本文深入解析 html canvas 的 `scale()` 变换与画布物理尺寸（`width`/`height` 属性）的本质区别，阐明为何仅调用 `ctx.scale()` 无法改变容器溢出行为，并提供可交互的动态缩放实现方案。
在 Canvas 开发中，一个常见误区是混淆 绘图上下文的变换（如 scale()） 与 画布自身的像素尺寸（canvas.width/canvas.height）。这两者作用层级不同，直接影响渲染结果和 DOM 布局行为。
- ✅ ctx.scale(sx, sy) 是绘图坐标系的变换：它仅影响后续所有绘图操作（如 drawImage、fillRect）的坐标和尺寸映射，但不改变画布的实际像素大小，也不影响 <canvas> 元素在页面中的 CSS 占据空间。
- ❌ 若仅调用 ctx.scale(0.5, 0.5) 而保持 canvas.width=240、canvas.height=157 不变，则：
- 实际绘制区域仍是 240×157 像素；
- 图像被压缩绘制在左上角 120×78 像素区域内（因缩放后坐标系单位变大）；
- 剩余画布区域（右侧/下侧）仍为空白像素，导致 <div id="whole"> 内容总宽高仍为 240×157，超出其 120×78 容器，从而触发不必要的滚动条。
✅ 正确做法是：同步调整画布物理尺寸 + 应用坐标系缩放 + 清空并重绘。这样既保证图像按比例显示，又使画布 DOM 尺寸与视觉内容严格匹配，滚动行为自然受控。
以下为完整可运行示例（含滑块控制缩放）：
<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" style="width: 200px;">
<div id="whole">
<canvas id="test" width="240" height="157"></canvas>
</div>
<style>
#whole {
border: 1px solid #ccc;
width: 120px;
height: 78px;
overflow: auto; /* 关键：auto 仅在内容溢出时显示滚动条 */
}
canvas {
margin: 0;
display: block; /* 消除行内元素默认基线间隙 */
}
</style>
<script>
const canvas = $('#test')[0];
const ctx = canvas.getContext('2d');
const $zoom = $('#zoom');
let chara = new Image();
chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town%2C_c._1900.jpg?dl=0";
// 首次加载完成即绘制原始图像
chara.onload = () => {
redraw();
};
// 缩放滑块变化时动态重绘
$zoom.on('input', () => {
redraw();
});
function redraw() {
const baseWidth = 240;
const baseHeight = 157;
const zoom = $zoom.val() * 0.5; // 例如值为2 → 实际缩放比0.5
// ✅ 步骤1：重设画布物理尺寸（触发清空）
canvas.width = Math.max(1, Math.round(baseWidth * zoom));
canvas.height = Math.max(1, Math.round(baseHeight * zoom));
// ✅ 步骤2：获取新上下文（因重设尺寸后上下文状态丢失）
const ctx = canvas.getContext('2d');
// ✅ 步骤3：清除（此时画布已重置，clearRect非必需但推荐显式调用）
ctx.clearRect(0, 0, canvas.width, canvas.height);
// ✅ 步骤4：绘制——注意：此处使用原始图像尺寸作为源尺寸，
// 但目标区域为整个缩放后画布，因此无需额外 scale()
// （也可用 scale()，但需配合原始 drawImage 参数，易出错）
ctx.drawImage(chara, 0, 0, canvas.width, canvas.height);
}
</script>? 关键注意事项：
- canvas.width/height 是像素数，设置它们会清空画布并重置所有上下文状态（包括 scale、translate 等），因此每次缩放都需重新配置。
- 使用 overflow: auto（而非 scroll）确保滚动条仅在真正需要时出现。
- 为避免小数像素导致模糊，对缩放后尺寸做 Math.round() 处理；同时用 Math.max(1, ...) 防止尺寸归零。
- 若需保留复杂绘图状态（如多次变换叠加），建议采用「虚拟画布」+ drawImage 缩放方案，而非直接修改主画布尺寸。
通过精准控制画布物理尺寸与绘图逻辑的协同，即可实现类似 Photoshop 的平滑缩放体验：图像随缩放比例自适应容器，滚动条智能响应真实内容边界。
