我的显示器分辨率为 1920x1080。我想要一个全屏 Canvas 来占据整个分辨率。
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);
当我单击屏幕时，我会按预期获得全屏 Canvas ，但记录的输出是
1920
969
不是 1920，而是 1080。如何确保 Canvas 占用完整的可用分辨率？
谢谢!
编辑:它看起来像 Element.requestFullScreen函数是异步的，这就是为什么我可能无法设置 Canvas 尺寸。 API 说它返回一个 promise ，但我不知道如何访问它。
最佳答案
您的代码在我这边工作，尽可能不要使用 %，vh 更适合您的用例，下面是 CSS 示例。
html, body {
height: 100vh;
width: 100%;
padding: 0px;
margin: 0px;
}
关于javascript - 无法将 Canvas 尺寸设为 1920x1080，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59027513/