如何在<div>中嵌入<canvas>并实现容器内滚动不溢出？

我明白你现在遇到的问题——把Canvas放进Div容器里，结果Canvas根本不受容器约束，还会溢出到页面其他地方对吧？别着急，这其实是个很常见的CSS布局问题，咱们一步步来解决。

为什么你的Canvas不受容器约束？ #

Canvas元素默认的display属性是inline-block，而且它自带固有宽高（默认是300px×150px）。如果你的容器Div没设置明确的尺寸和溢出规则，Canvas就会直接“突破”容器的限制；另外如果Canvas的实际绘制尺寸（通过width/height属性设置的）和容器的CSS尺寸不匹配，也会导致约束失效。

正确的实现步骤 #

1. 给容器Div配置关键样式

首先要给容器Div设置固定的宽高，同时开启滚动溢出效果，这样当Canvas内容超过容器尺寸时，就会自动出现滚动条：

.canvas-container {
  /* 自定义容器的宽高 */
  width: 400px;
  height: 300px;
  /* 关键：内容溢出时显示滚动条 */
  overflow: auto;
  /* 可选：给容器加个边框，方便看到边界 */
  border: 1px solid #ddd;
}

2. 合理设置Canvas的尺寸

要区分Canvas的属性宽高（决定绘制的分辨率）和CSS宽高（决定页面上的显示大小）：

• 如果想让Canvas本身比容器大，触发容器滚动：直接给Canvas的属性或CSS设置比容器更大的尺寸即可，比如：

#myCanvas {
  width: 800px;
  height: 600px;
}

• 如果想让Canvas的显示大小适配容器，但保持高分辨率绘制（避免模糊）：可以给Canvas的CSS设为100%，再通过JS调整它的属性宽高适配屏幕像素比：

#myCanvas {
  width: 100%;
  height: 100%;
}

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 适配像素比，避免模糊
const pixelRatio = window.devicePixelRatio || 1;
canvas.width = canvas.offsetWidth * pixelRatio;
canvas.height = canvas.offsetHeight * pixelRatio;
ctx.scale(pixelRatio, pixelRatio);

3. 正确插入Canvas到容器中

不管是通过HTML直接写还是JS动态插入，只要把Canvas放到容器Div内部就没问题，比如：

<div class="canvas-container">
  <canvas id="myCanvas"></canvas>
</div>

或者JS动态插入：

const canvas = document.createElement('canvas');
canvas.id = 'myCanvas';
document.querySelector('.canvas-container').appendChild(canvas);

这个插入操作本身是没问题的，之前的问题大概率出在CSS配置上。

常见误区提醒 #

• 别忘记给容器设置overflow: auto或overflow: scroll，否则即使Canvas比容器大，也不会出现滚动条，而是直接溢出。
• 避免给Canvas设置position: absolute等脱离文档流的属性（除非你有特殊布局需求），否则它会脱离容器的约束。

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