TypeError: getContext 不是 JavaScript 中的函数

TypeError: getContext is not a function in JavaScript

当对不是DOM 元素getContext()的值调用该方法时，会发生“TypeError: getContext is not a function”错误
。canvas

要解决该错误，请确保仅对
元素调用该getContext方法。canvas

typeerror getcontext 不是函数

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

索引.js


const canvas = document.getElementsByClassName('canvas');
console.log(canvas); // 👉️ [canvas.canvas]

// ⛔️ TypeError: getContext is not a function
const ctx = canvas.getContext('2d');

我们在 a而不是元素上调用了该getContext方法。NodeListcanvas

只在元素上调用`getContext`方法`canvas`

要解决该错误，console.log您调用
getContext()
方法的值并确保它是一个canvas元素。

这是一个完整的工作示例。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <canvas class="canvas" width="500" height="500"></canvas>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

请注意，在声明所有 DOM 元素之后，我们将 JS script 标签放在 body 标签的底部。

如果我们将脚本标记放在声明 DOM 元素的代码之上，我们将无法访问该canvas元素。

这是相关的 JavaScript 代码。

索引.js


const canvas = document.getElementsByClassName('canvas');
console.log(canvas); // 👉️ [canvas.canvas]

const ctx = canvas[0].getContext('2d');

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

该getElementsByClassName方法返回一个NodeList而不是 DOM 元素。

我们必须访问索引处的元素0以获取 DOM 元素，我们在该元素上调用该getContext方法。

If the error persists, console.log the value you’re calling the getContext method on and make sure it’s a canvas element.

If it’s a jQuery object, you have to convert it to a DOM element before calling
the getContext method.

index.js


const canvas = $('.canvas');
console.log(canvas); // 👉️ [canvas.canvas]

const ctx = canvas[0].getContext('2d');

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

If you still get the error, make sure you aren’t misspelling getContext
(method names are case-sensitive).

Conclusion #

The “TypeError: getContext is not a function” error occurs when the
getContext() method is called on a value that is not a canvas DOM element.

To solve the error, make sure to only call the getContext method on canvas
elements.

–