Question

当我想获得画布的上下文时，我遇到了问题。这是HTML代码：

<canvas id="thecanvas" width="600" height="300"></canvas>

和Javascript：

var canvaso = document.getElementById('thecanvas');
if (!canvaso) {
    alert('Error: Cannot find the canvas element!');
    return;
}
if (!canvaso.getContext) {
    alert('Error: Canvas context does not exist!');
    return;
}

“canvaso”变量已正确加载，但在“canvaso.getContext”上失败：

Uncaught TypeError: Object #<HTMLDivElement> has no method 'getContext'

感谢您的帮助。

Answer 1

您的浏览器不符合HTML5标准。兼容的浏览器将返回Object #<HTMLCanvasElement> has no method 'getContext'（尽管getContext方法可以工作）

Works fine here，你确定你在同一页面上的thecan的id有画布吗？

以下是一种可能性：您是否曾在文档中的任何位置定义div thecanvas，最有可能是在画布之后？重复IDS在语义上是不正确的，getElementById将返回DOM中该Id的最后一次出现。

Answer 2

试试这个（参见演示：http://jsbin.com/ijazum/1）：

<body>
  <canvas id="canvas" width="600" height="300"></canvas>

  <script>
    function getStart() {
      var canvas = document.getElementById('canvas');

      if (!canvas) {
        alert('Error: Cannot find the canvas element!');
        return;
      }

      if (!canvas.getContext) {
        alert('Error: Canvas context does not exist!');
        return;
      }

      var ctx = canvas.getContext('2d');

      ctx.fillStyle = "#3d3";
      ctx.fillRect(0, 0, 100, 100);
    }

    getStart();
  </script>
</body>

Answer 3

这可能是因为您将javascript作为外部文件加载到页面的<head>块中。这意味着您的javascript在加载<canvas>元素之类的其他html元素之前运行。这就是为什么你的浏览器在页面上找不到任何具有给定ID的元素的原因 - 因为那时canvas元素不存在。

有一些解决方案：

在声明<script>阻止后的任何时间，将{j}代码输入<canvas>块。
将您的javascript代码插入到一个函数中，然后调用该函数作为对页面上任何活动的反应，例如单击按钮或加载页面（使用onload中的<body>属性标记）。

第二种解决方案的样本如下所示：

的index.html：

<!DOCTYPE html>
<html>
<head>
  <script src="myscript.js"> </script>
</head>
<body onload="test()">
  <canvas id="thecanvas" width="600" height="300"></canvas>
</body>
</html>

myscript.js：

function test() {
  var canvaso = document.getElementById('thecanvas');
  if (!canvaso) {
      alert('Error: Cannot find the canvas element!');
      return;
  }
  else if (!canvaso.getContext) {
      alert('Error: Canvas context does not exist!');
      return;
  }
  else {
      alert('Success!');
  }
}

不能得到画布的getContext

3 个答案: