GetContext() 不工作

【问题标题】：GetContext() is not workingGetContext() 不工作
【发布时间】：2017-04-15 03:22:34
【问题描述】：

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

所以我正在为画布项目编写代码。然而，当使用 getContext() 函数时，JS 控制台会说

未捕获的类型错误：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>

有谁知道我做错了什么？

【问题讨论】：

标签： javascript canvas

【解决方案1】：

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); 
}

【讨论】：

试过这样做，但现在我得到了错误：Uncaught TypeError: Cannot read property 'getContext' of undefined at master.js:3`
表示数组为空。将您的代码放在 HTML 正文或 document.onload 中。我将更新我的答案以反映这一点。