Question

我正在使用常规JS（我知道它不是最好的，但我是初学者）

所以我正在为canvas项目编写代码。但是当使用getContext（）函数时，JS控制台会说

未捕获TypeError：canvas.getContext不是函数在master.js：4

我环顾四周，发现没有什么能解决我的问题。

var canvas = document.getElementsByClassName('myCanvas');
console.log(canvas);
var context = canvas.getContext('2d');
console.log(context);

HTML就是这样：

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="master.js" charset="utf-8"></script>
    <link rel="stylesheet" href="master.css">
  </head>

  <body>
    <canvas class="myCanvas">Your browser doesn't support HTML canvas</canvas>
  </body>
</html>

有谁知道我做错了什么？

Answer 1

getElementsByClassName返回一个元素数组。因此，它没有您正在寻找的方法。请尝试以下方法：

var canvas = document.getElementsByClassName('myCanvas')[0];
console.log(canvas);
var context = canvas.getContext('2d');
console.log(context);

您的代码也存储在HTML头中，因此找不到您的canvas元素。将您的<script>标记放在HTML <body>标记中，或在document.onload内设置一个函数，如下所示：

document.onload = function() {
  var canvas = document.getElementsByClassName('myCanvas')[0];
  console.log(canvas);
  var context = canvas.getContext('2d');
  console.log(context); 
}

GetContext（）不起作用

1 个答案: