如何将画布的宽度和高度设置为浏览器的所有高度和宽度而不会溢出？

Question

我想制作一个带有文档宽度和高度的画布而没有滚动条，但是我不知道该怎么做。我尝试过：

canvas.width = window.innerWidth;
canvas.width = parseInt(getComputedStyle( document.body ).getPropertyValue( 'width' ));
canvas.width = document.body.offsetWidth
canvas.width = document.body.clientWidth

但是我可以滚动使用1-20个未使用的像素，也无法通过固定数量的像素来减少宽度和高度-不同的浏览器会以不同的方式显示它。

Answer 1

如果您要问如何使元素成为视口宽度和高度的100％，可以使用CSS ...

#selector_id {
    width: 100vw,
    height: 100vh
}

Answer 2

window.innerWidth使您可以忽略滚动条而在窗口框架内获得整个宽度。

document.body.clientWidth为您提供垂直滚动条内部的宽度-如果存在的话。

这两个版本都可以在当前版本的Safari和Chrome上运行-我只是给了他们一个快速尝试。

两者都可以在所有现代浏览器上正常工作   window.innerWidth，这里是document.body.clientWidth。

我想知道在任何情况下这些都不如广告中所述。

（当然，如果您完全按照显示的代码执行代码，则最终只会得到document.body.clientWidth的值。我想您是说您依次尝试了每个代码。）

Answer 3

通过“显示：阻止”修复，画布元素默认不是阻止。