我有一台分辨率为1920x1080的显示器。我想要一个全屏画布，它占据了整个分辨率。
index.html
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<canvas id="c"></canvas>
<script src="index.js"></script>
</body>
</html>
index.css
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
#c {
width: 100%;
height: 100%;
background-color: red;
}
index.js
let canvas = document.getElementById('c');
let ctx = canvas.getContext('2d');
document.body.addEventListener("click", function() {
document.body.requestFullscreen();
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
console.log(canvas.width);
console.log(canvas.height);
}, false);
当我单击屏幕时，得到的是全屏画布，但记录的输出是
1920
969
而不是1920、1080。我如何确保画布占用全部可用分辨率？
谢谢！
编辑：看来Element.requestFullScreen函数是异步的，这就是为什么我可能无法设置画布尺寸的原因。 API说它返回一个诺言，但是我不确定如何访问它。
最佳答案
您的代码对我有利，请尽量不要使用％，vh更适合您的用例，例如下面的CSS示例。
html, body {
height: 100vh;
width: 100%;
padding: 0px;
margin: 0px;
}
示例：https://codepen.io/pen/poomVem
关于javascript - 无法将 Canvas 尺寸设为1920x1080，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59027513/