Question

我试图制作画布的背景，但是不能使用getContext。我收到错误消息：

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

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

但这对我没有帮助。

Answer 1

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

因此，这给我们留下了三个选择：

使用延迟

在您的脚本标签中添加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);
  }

})

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

1 个答案:

使用延迟

将脚本标签移到画布上

将代码包装在DOMContentLoaded事件中