Javascript Can'；获取画布的上下文_Javascript_Html_Canvas_Html5 Canvas

Javascript Can'；获取画布的上下文

javascript html canvas html5-canvas

Javascript Can'；获取画布的上下文,javascript,html,canvas,html5-canvas,Javascript,Html,Canvas,Html5 Canvas,当我想要获得画布的上下文时，我面临一个问题。以下是HTML代码： <canvas id="thecanvas" width="600" height="300"></canvas> “canvaso”变量已正确加载，但在“canvaso.getContext”上失败： UncaughtTypeError:对象#没有方法“getContext” 谢谢您的帮助。您的浏览器不兼容HTML5。兼容浏览器将返回对象#没有方法“getContext”（尽管getContext方

当我想要获得画布的上下文时，我面临一个问题。以下是HTML代码：

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

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

UncaughtTypeError:对象#没有方法“getContext”

谢谢您的帮助。

您的浏览器不兼容HTML5。兼容浏览器将返回

对象#没有方法“getContext”

（尽管getContext方法可以工作）

，您确定在同一页上有一张画布，其id为canvas吗

这里有一种可能性：您是否曾经在文档中的任何位置（最有可能在画布之后）定义id为canvas的

div

？重复Id在语义上不正确，getElementById将返回该Id在DOM中的最后一次出现。

您的浏览器不符合HTML5。兼容浏览器将返回

对象#没有方法“getContext”

（尽管getContext方法可以工作）

，您确定在同一页上有一张画布，其id为canvas吗

这里有一种可能性：您是否曾经在文档中的任何位置（最有可能在画布之后）定义id为canvas的

div

？重复Id在语义上不正确，getElementById将返回该Id在DOM中的最后一次出现。

试试这个（请参见演示：）：


函数getStart（）{
var canvas=document.getElementById（'canvas'）；
如果（！画布）{
警报（'错误：找不到画布元素！'）；
返回；
}
如果（！canvas.getContext）{
警报（'错误：画布上下文不存在！'）；
返回；
}
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle=“#3d3”；
ctx.fillRect（0,0,100,100）；
}
getStart（）；

试试这个（见演示：）：


函数getStart（）{
var canvas=document.getElementById（'canvas'）；
如果（！画布）{
警报（'错误：找不到画布元素！'）；
返回；
}
如果（！canvas.getContext）{
警报（'错误：画布上下文不存在！'）；
返回；
}
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle=“#3d3”；
ctx.fillRect（0,0,100,100）；
}
getStart（）；

这可能是因为您将javascript作为外部文件加载到页面的

块中。这意味着您的javascript在加载其他html元素（如

元素）之前运行。这就是为什么浏览器在页面上找不到任何具有给定ID的元素的原因，因为此时画布元素不存在

有几种解决方案：

在声明

块后，随时将javascript代码输入

块

将javascript代码插入函数，然后调用该函数作为对页面上任何活动的反应，例如单击按钮或加载页面（使用

标记中的

onload

属性）

第二种溶液的样品如下所示：

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>

这可能是因为您将javascript作为外部文件加载到页面的

块中。这意味着您的javascript在加载其他html元素（如

元素）之前运行。这就是为什么浏览器在页面上找不到任何具有给定ID的元素的原因，因为此时画布元素不存在

有几种解决方案：

在声明

块后，随时将javascript代码输入

块

将javascript代码插入函数，然后调用该函数作为对页面上任何活动的反应，例如单击按钮或加载页面（使用

标记中的

onload

属性）

第二种溶液的样品如下所示：

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>

看看你的浏览器是否真的兼容html5我检查了它，我使用chrome，它是兼容的。看看你的浏览器是否真的兼容html5，我检查了它，我使用chrome，它是兼容的。我的web浏览器兼容html5（我使用chrome），我有其他网页的画布功能，但在这个网页上没有。关于对象，你是对的。我得到了一个HtmlLevel而不是HtmlCanvaElement，但我不知道为什么！请参阅编辑，在js fiddle中工作良好。这里有一种可能性：您是否曾在文档中的任何位置定义id为Canvas的

div

？重复的Id在语义上不正确，

getElementById

将返回该Id的最后一次出现。我的web浏览器与HTML5兼容（我使用chrome），我在其他网页上都有画布功能，但在这个网页上没有。关于对象，你是对的。我得到了一个HtmlLevel而不是HtmlCanvaElement，但我不知道为什么！请参阅编辑，在js fiddle中工作良好。这里有一种可能性：您是否曾在文档中的任何位置定义id为Canvas的

div

？重复Id在语义上不正确，

getElementById

将返回该Id的最后一次出现。那么这意味着什么，画布上下文不存在。。。。如果它在第一个if语句中找到了它，为什么它不存在呢？那么，画布上下文不存在是什么意思呢。。。。如果它在第一个if语句中找到它，为什么它不存在？

<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>

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

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