无法在 JS 中读取 null 的属性（读取“getContext”）

作者

无法在 JS 中读取 null 的属性（读取 ‘getContext’）

TypeError: Cannot read property ‘getContext’ of Null in JS

“无法读取 null 的属性（读取‘getContext’）”错误的发生有两个原因：

  1. getContext在不存在的元素上调用方法canvas。
  2. 在声明 canvas 元素的 HTML 上方插入 JS 脚本标记。

无法读取 null 的属性 getcontext

下面是错误如何发生的示例。

索引.js
const canvas = document.getElementById('does-not-exist');
console.log(canvas); // 👉️ null

// ⛔️ Uncaught TypeError: Cannot read properties of null (reading 'getContext')
const ctx = canvas.getContext('2d');

我们试图在导致错误的值getContext()上调用该方法。null

在调用之前确保 DOM 元素存在getContext()

确保id在尝试获取canvas
元素时提供的是正确的。

id当向方法提供无效时，通常会发生错误getElementById
。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- ✅ id should match your JS code -->
    <canvas id="canvas" width="500" height="500"></canvas>

    <script src="index.js"></script>
  </body>
</html>

HTML代码中的 应该与您在方法调用中传递的id相同。iddocument.getElementById()

将JS脚本标签放在body标签的底部

在创建画布元素后，将 JS 脚本标签放在 body 标签的底部。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- ❌ BAD - script is run before canvas is created ❌ -->
    <script src="index.js"></script>

    <canvas id="canvas" width="500" height="500"></canvas>
  </body>
</html>

该index.js脚本在创建元素之前运行canvas，因此您无法访问文件中的元素index.js。

索引.js
const canvas = document.getElementById('canvas');
console.log(canvas); // 👉️ null

// ⛔️ Cannot read properties of null (reading 'getContext')
const ctx = canvas.getContext('2d');

在声明 DOM 元素之后，您应该将 JS 脚本标记放在正文的底部。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>

    <!-- ✅ GOOD - canvas is already created ✅ -->
    <script src="index.js"></script>
  </body>
</html>

现在您可以访问文件canvas中的元素index.js。

索引.js
const canvas = document.getElementById('canvas');
console.log(canvas); // 👉️ canvas#canvas

// ✅ works
const ctx = canvas.getContext('2d');

console.log(ctx); // 👉️ CanvasRenderingContext2D

HTML 代码是从上到下解析的，因此 script 标签必须放在 body 标签的底部，在它需要访问的所有 DOM 元素之后。

结论

getContext在值上调用方法时发生“无法读取 null 的属性（读取‘getContext’）”错误null。

要解决此错误，请确保在声明 HTML 后加载 JS 脚本标记，并且id元素的 存在于 DOM 中。