javascript 无法获取画布的上下文
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11695523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't getContext of canvas
提问by user1558569
I'm facing a problem when i want to get the context of a canvas. Here is the HTML code:
当我想获取画布的上下文时，我遇到了问题。这是 HTML 代码：
<canvas id="thecanvas" width="600" height="300"></canvas>
and the Javascript:
和 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;
}
The "canvaso" variable is correctly loaded, but it failed on "canvaso.getContext":
“canvaso”变量已正确加载，但在“canvaso.getContext”上失败：
Uncaught TypeError: Object #<HTMLDivElement> has no method 'getContext'
Thanks for your help.
谢谢你的帮助。
回答by Austin
Your browser is not HTML5 compliant. A compliant browser would return Object #<HTMLCanvasElement> has no method 'getContext'(Although the getContext method would work)
您的浏览器不符合 HTML5。兼容的浏览器将返回Object #<HTMLCanvasElement> has no method 'getContext'（尽管 getContext 方法可以工作）
Works fine here, are you sure you have a canvas by the id of thecanvas on the same page?
在这里工作正常，您确定在同一页面上有一个由 thecanvas 的 id 指定的画布吗？
Here is a possibility: do you ever define a divwith the id thecanvasanywhere in your document, most likely after the canvas? Duplicate IDS are semantically incorrect, and getElementById will return the last occurrence of that Id within the DOM.
这是一种可能性：您是否曾经在文档中的任何位置（最有可能在画布之后）定义div带有 id 的 id thecanvas？重复的 IDS 在语义上是不正确的，getElementById 将返回该 Id 在 DOM 中的最后一次出现。
回答by Danil Speransky
Try this (see Demo: http://jsbin.com/ijazum/1):
试试这个（见演示：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>
回答by Artezanz
This is probably because you loaded your javascript as an external file in the <head>block of the page. This means that your javascript ran before the rest of the html elements like the <canvas>element were loaded. That's why your browser couldn't find any element with the given ID on the page - because the canvas element didn't exist at that point.
这可能是因为您将 javascript 作为外部文件加载<head>到页面块中。这意味着您的 javascript 在<canvas>加载其他 html 元素（如元素）之前运行。这就是为什么您的浏览器在页面上找不到具有给定 ID 的任何元素的原因 - 因为当时画布元素不存在。
There are a few solutions to this:
有几个解决方案：
- Enter your javascript code into a
<script>block anytime after you declare the<canvas>block. - Insert your javascript code into a function, then call that function as a reaction to any activity on the page, such as clicking a button or loading the page (using the
onloadattribute in the<body>tag).
<script>在声明<canvas>块后，随时将您的 javascript 代码输入到块中。- 将您的 javascript 代码插入一个函数，然后调用该函数作为对页面上任何活动的反应，例如单击按钮或加载页面（使用标签中的
onload属性<body>）。
A sample of the second solution has been shown below:
下面显示了第二种解决方案的示例：
index.html:
索引.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:
我的脚本.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!');
}
}
