1

当我想获取画布的上下文时，我遇到了一个问题。这是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'

谢谢你的帮助。

4

3 回答 3

3

试试这个（见演示：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>
于 2012-07-27T21:30:14.733 回答
3

您的浏览器不兼容 HTML5。一个兼容的浏览器会返回Object #<HTMLCanvasElement> has no method 'getContext'（虽然 getContext 方法可以工作）

在这里工作正常，你确定你在同一页面上有一个由 thecanvas 的 id 组成的画布吗？

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

于 2012-07-27T20:59:28.040 回答
0

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

有几个解决方案：

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

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

索引.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!');
  }
}
于 2016-12-19T21:01:08.320 回答