Javascript 画布有时不会根据宽度和高度调整大小

我尝试在下面的Javascript中调整画布的大小：

'use strict';

(_ => {
  // 'board' is the canvas
  const board = document.querySelector('.board');
  const ctx = board.getContext('2d');

  initialise();

  function initialise() {
    board.width = board.clientWidth;
    board.height = board.clientHeight;
  }
})();

但是，画布有时会调整自身大小，有时不会在CSS宽度和高度设置为100%的情况下默认返回0*0。我试着在网上搜索，没有类似的问题。我在这里做错什么了吗

我使用的是Chrome版本65.0.3325.181官方版本64位，如果有帮助的话。提前谢谢

编辑1 我在HTML中添加了以下代码行：

---

因此board.clientWidth和board.clientHeight应该获得正确的大小，但有时不能。您正在设置加载时的宽度和高度，因为代码在加载DOMContentLoaded事件后运行，对吗？。如果没有设置它，还可以调用窗口调整大小时的初始化方法

差不多

document.addEventListener("resize", initialize);

---

如果脚本在头部，您可能希望先等待文档准备就绪：

document.onreadystatechange = function () {
    if (document.readyState === "interactive") {
        // Your code.
    }
}

可以使用requestAnimationFrame设置画布的宽度和高度。 这个解决方案在我所有的项目中都有效，我经常使用全屏画布

const requestAnimation=window.requestAnimationFrame|| window.mozRequestAnimationFrame|| window.webkitRequestAnimationFrame|| window.msRequestAnimationFrame； window.requestAnimationFrame=requestAnimation； 函数getIdid{return document.getElementByIdid；} const canvas=getId'canvas'； 功能设置{ canvas.ctx=canvas.getContext2d； 使现代化 } 功能更新{ //allmoost全屏画布 canvas.width=window.innerWidth*0.95； canvas.height=window.innerHeight*0.95； //创建一个黑色矩形 canvas.ctx.fillRectcanvas.width/4、canvas.height/4、canvas.width/2、canvas.height/2 请求动画框架更新； } 设置； 画布{ 位置：固定； 边框：纯红； 左：0px； 顶部：0px； } 解析！=DOMContentLoaded 是的，这就是这个让我挠头好几天的故事的寓意

延迟并不保证DOM已准备就绪。因此，更正后的代码应为：

const board = document.querySelector('.board');
const ctx = board.getContext('2d');

initialise();

function initialise() {
  document.addEventListener('DOMContentLoaded', () => {
    board.width = board.clientWidth;
    board.height = board.clientHeight;
  });
}

---

您确定画布已完全加载吗？可能是布局问题，不确定客户端*是否保证提供正确的结果，即强制所有必要的布局。@H.B.如何确保画布已完全加载？可能是您应该尝试board.style.width和board.style.height？如果没有，我预计会出现错误。如果在加载画布之前执行脚本，则querySelector中的值应为null。如果脚本放在文档中的元素之后，则应将其加载。@MohammadUsman:这可能会返回空字符串，除非设置了style属性。它不计算大小。虽然您在脚本上使用了defer标记，但您是否尝试过等待文档加载然后执行代码？@qwerty：虽然我忽略了该属性，但不完全相同，您能检查一下它是否有任何更改吗。延迟脚本在加载DOMContentLoaded之前触发。

document.onreadystatechange = function () {
    if (document.readyState === "interactive") {
        // Your code.
    }
}

const board = document.querySelector('.board');
const ctx = board.getContext('2d');

initialise();

function initialise() {
  document.addEventListener('DOMContentLoaded', () => {
    board.width = board.clientWidth;
    board.height = board.clientHeight;
  });
}