“HTMLElement”类型上不存在属性“getContext”答案

【问题标题】：Property 'getContext' does not exist on type ''HTMLElement"“HTMLElement”类型上不存在属性“getContext”
【发布时间】：2019-11-21 15:48:57
【问题描述】：

我正在尝试制作画布的背景，但我无法使用 getContext。我得到错误：

Uncaught TypeError: Cannot read property 'getContext' of null at game.js:4

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset= "UTF-8">
        <title>Game</title>
    </head>
    <body>
        <script src="game.js"></script>
        <canvas id="canvas" width="100" height="320"></canvas>
    </body>
</html>

Javascript


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


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

我已经尝试过使用帖子：Cannot read property 'getContext' of null

但这对我没有帮助。

【问题讨论】：

您的 JavaScript 与 DOM 元素的关系在哪里？我的猜测是你的 javascript 在 DOM 元素存在之前就已经运行了。你应该把你的 JS 放在结束的

标签： javascript html

【解决方案1】：

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

所以，这给我们留下了三个选择：

使用延迟

将 defer 添加到您的脚本标签，这将在 dom 准备好后加载它

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

将脚本标签移到画布后

将标签移动到画布之后，可以让画布在脚本运行时准备就绪

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

将您的代码包装在 DOMContentLoaded 事件中

将您的代码放入此事件中将在 DOM 加载后运行代码。

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);
  }

})

【讨论】：