JavaScript报错Cannot read property 'getContext' of Null，但脚本在画布后且ID匹配

嘿，我一眼就揪出你代码里的问题啦！核心错误和加载顺序没关系，是获取canvas元素的选择器写错了～

你现在写的是：

const canvas = document.querySelector("myCanvas");

这里的问题在于：querySelector 遵循CSS选择器语法，通过ID选择元素时必须在ID名称前加 # 符号。你现在写的 "myCanvas" 会让浏览器去寻找**标签名为<myCanvas>**的元素，而非ID为myCanvas的<canvas>元素，自然就拿不到正确的DOM节点了。

两种修正方案： #

• 方案一：给选择器补上#，符合CSS选择器规范：

  const canvas = document.querySelector("#myCanvas");
  

• 方案二：用专门通过ID获取元素的getElementById方法（这个方法不需要加#，更直接）：

  const canvas = document.getElementById("myCanvas");
  

修正之后，你的代码就能正确获取到canvas元素，WebGL上下文也能正常初始化，黑色的清除色也能正常渲染到画布上了。

内容的提问来源于stack exchange，提问作者Papples