Javascript 无法使画布大小为1920x1080

我有一台分辨率为1920x1080的显示器。我想有一个全屏画布，占据整个决议

index.html

index.js

当我点击屏幕时，我得到了预期的全屏画布，但记录的输出是

1920

969

而不是19201080年。如何确保画布使用完整的可用分辨率

谢谢

---

编辑：看起来函数是异步的，这就是为什么我可能无法设置画布维度的原因。API说它返回一个承诺，但我不确定如何访问它。

当您请求全屏显示时，它有时会先显示一个弹出窗口。因此，您可能必须实现另一个事件侦听器：

document.addEventListener("fullscreenchange", function () {
    // resize
}, false);

document.addEventListener("mozfullscreenchange", function () {
    // resize
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    // resize
}, false);

document.addEventListener("msfullscreenchange", function () {
   // resize
}, false);

这是因为document.body.clientWidth和document.body.clientHeight将显示正文内部的宽度和高度

---

要获得屏幕分辨率，您必须使用window.screen.width和window.screen.height。

您的代码在我这边有效，尽可能不要使用%，vh更适合您的用例，下面的CSS示例

html, body {
    height: 100vh;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

例如：

---

这就是解决办法。我正在使用requestFullscreen返回的承诺来触发画布大小调整。

当然可以，但在全屏时没有地址栏和选项卡栏。如何设置/查询画布的全屏尺寸？您的笔输出1920 x 497双击，例如，全屏后单击一次，顺便说一句，我使用的是Firefox

1920

969

document.addEventListener("fullscreenchange", function () {
    // resize
}, false);

document.addEventListener("mozfullscreenchange", function () {
    // resize
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    // resize
}, false);

document.addEventListener("msfullscreenchange", function () {
   // resize
}, false);

html, body {
    height: 100vh;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

document.body.addEventListener("click", function() {
    document.body.requestFullscreen().then(() => init());
}, false);


function init()
{
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;

    console.log(canvas.height);
    console.log(canvas.width);
}