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

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

通过"display： block"修复，画布元素默认不是块。

Answer 2

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

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

Answer 3

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

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

这些都适用于当前版本的Safari和Chrome - 我只是快速尝试了一下。

两者都应该适用于所有现代浏览器，请在此处检查 window.innerWidth 和此处为 document.body.clientWidth。

我很想知道这些不符合广告宣传的任何情况。

(当然，如果你完全按照你显示的那样执行代码，你最终只会得到 document.body.clientWidth 的值。我猜你的意思是你依次尝试了它们中的每一个。