已解析！= DOMContentLoaded

Question

我尝试在下面的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;
  }
})();

但是，画布有时会自行调整大小，有时候不会（默认返回0 * 0，CSS宽度和高度设置为100%）。我尝试过在线搜索，没有类似的问题。我在这里做错了吗？

如果有帮助，我正在使用Chrome Version 65.0.3325.181 (Official Build) (64-bit)。提前谢谢！

编辑1

我在HTML <head>中添加了以下代码行：

  ...
  <script src="app.js" defer></script>
</head>

defer属性应该导致脚本仅在页面完成解析后加载。

编辑2

以下是我的CSS：

.board {
  display: block;
  height: 100%;
  width: 100%;
}

因此board.clientWidth和board.clientHeight应该获得正确的尺寸，但有时它不会。

Answer 1

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

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

Answer 2

您可以使用requestAnimationFrame来设置画布的宽度和高度这个解决方案适用于我的所有项目，我使用全屏画布

＆＃13;

const requestAnimation = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimation;

function getId(id) { return document.getElementById(id); }

const canvas = getId('canvas');

function SetUp() {
  canvas.ctx = canvas.getContext("2d");
  Update();
}
 
function Update() {
  // allmoost fullscreen canvas
  canvas.width = window.innerWidth * 0.95;
  canvas.height = window.innerHeight * 0.95;
  
  // creates a black rectangle
  canvas.ctx.fillRect(canvas.width / 4, canvas.height / 4,canvas.width / 2, canvas.height / 2)
  
  requestAnimationFrame(Update);
}

SetUp();

＆＃13;

canvas {    
  position: fixed;
  border: solid red;
  left: 0px;
  top: 0px;
}

＆＃13;

<canvas id="canvas"></canvas>

＆＃13;

Answer 3

已解析！= DOMContentLoaded

是的，这个故事的寓意让我头疼了好几天。

defer并不保证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;
  });
}

Answer 4

你正在设置加载时的宽度和高度，因为代码在加载DOMContentLoaded事件后运行，对吧？如果没有设置它，也会调用window resize上的initialize（）方法。

像

这样的东西

{{1}}

画布有时不会调整宽度和高度

编辑1

编辑2

4 个答案:

已解析！= DOMContentLoaded