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

本文讲解 canvas 的 `scale()` 变换与 `width`/`height` 属性的本质区别，指出仅调用 `ctx.scale()` 不会改变画布物理尺寸，需同步重设 canvas 元素的 `width` 和 `height` 属性，并配合 `overflow: auto` 实现精准滚动控制。

在 Canvas 开发中，一个常见误区是认为调用 ctx.scale(0.5, 0.5) 就能让整个画布“缩小一半”，从而适配容器尺寸并自动隐藏多余滚动条。事实并非如此：ctx.scale() 仅影响后续绘图操作的坐标变换（即绘制内容被缩放），但不会改变 canvas 元素自身的渲染尺寸（CSS 尺寸）或位图缓冲区大小（HTML width/height 属性）。

Canvas 元素实际占据的页面空间由两个独立维度决定：

• 位图缓冲区尺寸：由 HTML 属性 width 和 height（无单位，如 width="240"）定义，决定绘图上下文的逻辑坐标系和像素精度；
• CSS 渲染尺寸：由 CSS width/height（如 width: 120px）控制，若未显式设置，则默认等于位图尺寸（以 px 为单位）。

当你执行 ctx.scale(0.5, 0.5) 后：

• 绘制的图像确实按比例缩小（例如 drawImage(chara, 0, 0, 240, 157) 会渲染为原尺寸的一半）；
• 但 canvas 元素的位图缓冲区仍是 240×157 像素，其 CSS 渲染尺寸也仍为 240px×157px（除非额外设置 CSS）；
• 因此父容器 #whole（120×78px）依然需要滚动条来容纳超限的 canvas —— 滚动的是“未缩放的 canvas 容器”，而非“缩放后的内容”。

✅ 正确做法是：同步缩放位图缓冲区 + 重置绘图状态 + 合理配置 CSS：

#whole {
  border: 1px solid #ccc;
  width: 120px;
  height: 78px;
  overflow: auto; /* 关键：仅在内容溢出时显示滚动条 */
}
canvas {
  margin: 0;
  display: block; /* 防止底部空白间隙 */
}

const canvas = document.getElementById('test');
const ctx = canvas.getContext('2d');
const $zoom = document.getElementById('zoom');
const baseWidth = 240;
const baseHeight = 157;

let chara = new Image();
chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town%2C_c._1900.jpg?dl=0";

chara.onload = () => {
  // 初始渲染
  resizeAndDraw(1);
};

function resizeAndDraw(zoomFactor) {
  // ✅ 步骤1：重设 canvas 位图缓冲区（关键！）
  canvas.width = Math.round(baseWidth * zoomFactor);
  canvas.height = Math.round(baseHeight * zoomFactor);

  // ✅ 步骤2：重置变换矩阵（避免累积缩放）
  ctx.setTransform(1, 0, 0, 1, 0, 0);

  // ✅ 步骤3：清除并重绘（使用原始图像尺寸作为 drawImage 参数，确保等比缩放）
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(chara, 0, 0, baseWidth, baseHeight);
}

$zoom.addEventListener('input', () => {
  const zoom = $zoom.value / 2; // 示例：value=2 → 1.0x, value=4 → 2.0x
  resizeAndDraw(zoom);
});

? 关键要点总结：

• ctx.scale() 是绘图变换，不影响 canvas 物理尺寸；要改变可视区域大小，必须修改 canvas.width/canvas.height；
• 每次缩放前调用 ctx.setTransform(1,0,0,1,0,0) 重置变换矩阵，防止多次 scale() 导致意外累积；
• 使用 overflow: auto（而非 scroll）让滚动条智能出现/消失；
• display: block 消除 默认行内元素带来的底部间距；
• drawImage(img, sx,sy,sw,sh, dx,dy,dw,dh) 中，保持 sx,sy,sw,sh 不变（即源图像全尺寸），仅通过调整 canvas 缓冲区大小实现整体缩放，语义清晰且抗锯齿更优。

这样即可实现类似 Photoshop 的平滑缩放体验：缩小时内容完整可见、无冗余滚动；放大时自动启用精准滚动，真正响应用户交互意图。