javascript - GetContext()无法正常工作

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

所以我正在为画布项目编写代码。但是，当使用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>

有人知道我在做什么错吗？

最佳答案

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

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

您的代码也存储在HTML头中，因此找不到画布元素。将您的<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);
}

关于javascript - GetContext()无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43403456/