为什么当垂直滚动条出现时，html5画布不是全屏的

Question

我使用全屏画布作为页面第一部分的背景。但当我添加第二部分并出现垂直滚动条时，画布的高度会降低一点，并出现一个间隙。这是我的代码：
P.s：对不起，我的代码包含错误，我修复了它们。现在你可以看到红色的缺口。

var canvas = document.getElementById('canvas')
var c = canvas.getContext('2d')
scaleCanvas()
window.addEventListener("resize", scaleCanvas)
function scaleCanvas() {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
c.fillStyle = 'black'
c.fillRect(0, 0, canvas.width, canvas.height)
}

* {
box-sizing: border-box;
max-width: 100%;
}
body {
margin: 0;
padding: 0;
}
#first-section {
position: relative;
min-height: 100vh;
background-color: red; /* to see the gap */
}
#content {
position: relative;
z-index: 2;
}
#second-section {
min-height: 100vh;
background-color: blue;
}
#canvas {
display: block;
padding: 0;
margin: 0;
border: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

<div id="first-section">
<canvas id="canvas"></canvas>
<div id="content">content</div>
</div>
<div id="second-section"></div>

Answer 1

假设你指的是全屏，而不是整页。两者非常不同。

如果你指的是完整页面，那么屏幕API链接也会为你提供获取页面大小的详细信息。

全屏画布大小

问题是您的内容超出了页面宽度和高度(innerWidth，innerHeight(

ID为first-section、content和second-section的元素必须在显示区域内，否则将获得滚动条。滚动条将更改innerWidth、innerHeight值减去滚动条宽度或高度，具体取决于哪一个可见。

为了防止滚动条，最好的选择是将所有内容保留在innerWidth和innerHeight内

全屏滚动条

如果您想要滚动条并且使用全屏，则可以使用screen API以像素为单位获取显示器的width和height。您可以设置画布大小以匹配屏幕，而滚动条不会影响其大小。

注意请阅读提供的屏幕链接，因为定义屏幕的内容可能与预期不符。EG多个监视器或设备方向将影响您使用API的方式。

基本示例

因此，在全屏模式下，您可以设置画布大小并使用忽略滚动条

function sizeFullScreenCanvas() {
canvas.width = screen.width;
canvas.height= screen.height;
}