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

我想做一个没有卷轴的宽度和高度都和文档一样的画布，但我不知道怎么做。我试过：

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

---

但是我有1-20个未使用的像素，我可以滚动，而且我不能通过固定数量的像素来减少宽度和高度-不同的浏览器显示不同。

如果你问如何使元素的宽度和高度达到视口宽度和高度的100%，你可以使用CSS

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

---

window.innerWidth提供窗口框架内的整个宽度，忽略滚动条

document.body.clientWidth提供垂直滚动条内的宽度（如果存在）

这两个版本都适用于当前版本的Safari和Chrome——我只是快速试用了一下

这两种浏览器都可以在所有现代浏览器上使用。请在此处查看 这是给你的

我很想知道在什么情况下这些广告不起作用

（当然，如果您完全按照所显示的方式执行代码，那么最终只会得到document.body.clientWidth的值。我猜您的意思是您依次尝试了它们。）

由“display:block”修复，默认情况下画布元素不是块