如何设置canvas的宽高为浏览器所有高宽不溢出？

Question

我想制作一个 canvas 文档的宽度和高度没有滚动条，但我不知道该怎么做。我试过了：

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 为您提供 window 框架内的整个宽度，忽略滚动条。

document.body.clientWidth 给出垂直滚动条内的宽度 - 如果存在的话。

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

两者都应该适用于所有现代浏览器，请在此处查看 window.innerWidth and here for document.body.clientWidth.

我很想知道在哪些情况下这些功能无法像宣传的那样工作。

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

Answer 3

已由 "display: block" 修复，canvas 元素默认不是块。

如何设置canvas的宽高为浏览器所有高宽不溢出？

How to set width and height of canvas to all height and width of browser without overflow?

html

javascript

css

height

width