Javascript 财产'；getContext'；不存在于类型''；HTMLElement“；

我试图制作画布的背景，但无法使用getContext。我得到一个错误：

未捕获的TypeError:无法在game.js:4读取null的属性“getContext”

Html

我已经尝试使用该帖子：

---

但这对我没有帮助。

这是因为您在将元素添加到页面/DOM之前调用javascript，并且浏览器同步运行/加载代码/HTML（一次一行）

因此，我们有三个选择：

使用延迟 将defer添加到脚本标记这将在dom就绪后加载它

<script src="game.js" defer></script>

---

这是因为您在将元素添加到页面/DOM和浏览器同步运行/加载代码/HTML（一次一行）之前调用javascript

因此，我们有三个选择：

使用延迟 将defer添加到脚本标记这将在dom就绪后加载它

<script src="game.js" defer></script>

---

与DOM元素相关的JavaScript在哪里？我猜您的javascript在DOM元素出现之前就已经运行了。你应该把你的JS放在关闭标记的正确位置，这样它就可以在所有元素呈现之后运行。因此，有一件事可以帮助你进行调试，那就是执行

console.log（canvas）

。当getElementById找不到元素时，它返回null。在您的例子中，之所以会发生这种情况，是因为您在DOM上呈现canvas元素之前调用了该函数？我猜您的javascript在DOM元素出现之前就已经运行了。你应该把你的JS放在关闭标记的正确位置，这样它就可以在所有元素呈现之后运行。因此，有一件事可以帮助你进行调试，那就是执行

console.log（canvas）

。当getElementById找不到元素时，它返回null。在您的例子中，之所以发生这种情况，是因为您在DOM上呈现canvas元素之前调用了该函数

<script src="game.js" defer></script>

<canvas id="canvas" width="100" height="320"></canvas>
<script src="game.js"></script>

document.addEventListener('DOMContentLoaded', e => {
  const canvas = document.getElementById('canvas');
  if (canvas != null) {
    ctx = canvas.getContext("2d");
  } else {
    console.log('wtf happen');
  }

  function draw(){
      ctx.background(255,0,0);
  }

})