Canvas缩放比例与画布尺寸问题：缩放后仍出现多余滚动条

你遇到的问题核心是**ctx.scale()只缩放绘图上下文的绘制坐标系，不会改变Canvas元素本身的实际尺寸**。你的Canvas元素始终保持240x157的属性尺寸，外层div的滚动条会基于这个尺寸生成，而缩放后的图像仅占Canvas左上角区域，剩下的空白区域就导致了无内容的滚动条。

要实现缩放后Canvas适配div尺寸，需要同时调整Canvas元素的实际尺寸和绘图逻辑，以下是两种可行方案：

方案一：直接调整绘图尺寸 + 修改Canvas属性 #

无需使用ctx.scale，通过drawImage参数控制图片显示尺寸，同步修改Canvas的宽高属性，让Canvas元素尺寸与缩放后的图片一致：

完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="whole">
  <canvas id="test"></canvas>
</div>

#whole{
  border:1px solid;
  width:120px;
  height:78px;
  overflow:scroll;
}

var ctx = $('canvas')[0].getContext('2d');
var chara = new Image();
chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town%2C_c._1900.jpg?dl=0";

// 定义缩放比例
const scale = 1/2;
// 计算缩放后的图片尺寸
const scaledWidth = 240 * scale;
const scaledHeight = 157 * scale;

// 修改Canvas的实际分辨率尺寸（不带单位）
$('canvas')[0].width = scaledWidth;
$('canvas')[0].height = scaledHeight;

chara.onload = () => { 
  // 直接绘制缩放后的图片
  ctx.drawImage(chara, 0, 0, scaledWidth, scaledHeight);
}

方案二：使用ctx.scale + 同步Canvas尺寸 #

如果需要保留ctx.scale的方式（比如后续有更多缩放相关绘制逻辑），需先调整Canvas尺寸，再缩放绘图上下文：

完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="whole">
  <canvas id="test"></canvas>
</div>

#whole{
  border:1px solid;
  width:120px;
  height:78px;
  overflow:scroll;
}

var ctx = $('canvas')[0].getContext('2d');
var chara = new Image();
chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town%2C_c._1900.jpg?dl=0";

const scale = 1/2;
const scaledWidth = 240 * scale;
const scaledHeight = 157 * scale;

// 先调整Canvas的实际尺寸
$('canvas')[0].width = scaledWidth;
$('canvas')[0].height = scaledHeight;

// 缩放绘图上下文坐标系
ctx.scale(scale, scale);

chara.onload = () => { 
  // 绘制原尺寸图片，会被scale自动缩放为目标大小
  ctx.drawImage(chara, 0, 0, 240, 157);
}

额外注意点 #

Canvas的width和height属性标准写法是纯数字（不带px单位），虽然浏览器可能兼容带单位的写法，但遵循标准能避免潜在的渲染问题。

内容的提问来源于stack exchange，提问作者whitebear