Javascript 无法使用画布读取 null 的属性“getContext”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10291693/
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
Cannot read property 'getContext' of null, using canvas
提问by Kobi
I get the error Uncaught TypeError: Cannot read property 'getContext' of nulland the important parts in files are... I am wondering since game.js is in a directory below, it cannot find canvas? What should I do?
我收到错误Uncaught TypeError: Cannot read property 'getContext' of null，文件中的重要部分是...我想知道因为 game.js 在下面的目录中，它找不到画布？我该怎么办？
./index.html:
./index.html：
<canvas id="canvas" width="640" height="480"></canvas>
./javascript/game.js:
./javascript/game.js:
var Grid = function(width, height) {
...
this.draw = function() {
var canvas = document.getElementById("canvas");
if(canvas.getContext) {
var context = canvas.getContext("2d");
for(var i = 0; i < width; i++) {
for(var j = 0; j < height; j++) {
if(isLive(i, j)) {
context.fillStyle = "lightblue";
}
else {
context.fillStyle = "yellowgreen";
}
context.fillRect(i*15, j*15, 14, 14);
}
}
}
}
}
回答by C. Leung
I guess the problem is your js runs before the html is loaded.
我想问题是您的 js 在加载 html 之前运行。
If you are using jquery, you can use the document ready function to wrap your code:
如果您使用 jquery，您可以使用文档就绪函数来包装您的代码：
$(function() {
var Grid = function(width, height) {
// codes...
}
});
Or simply put your js after the <canvas>.
或者干脆把你的 js 放在<canvas>.
回答by CrsCaballero
Put your JavaScript code after your tag <canvas></canvas>
将 JavaScript 代码放在标签之后 <canvas></canvas>
回答by Peter
You don't have to include JQuery.
In the index.html:<canvas id="canvas" width="640" height="480"></canvas><script src="javascript/game.js">This should work without JQuery...
您不必包含 JQuery。
在 index.html 中：<canvas id="canvas" width="640" height="480"></canvas><script src="javascript/game.js">这应该可以在没有 JQuery 的情况下工作...
Edit: You should put the script tag IN the body tag...
编辑：您应该将脚本标记放在正文标记中...
回答by Peter
Write code in this manner ...
以这种方式编写代码......
<canvas id="canvas" width="640" height="480"></canvas>
<script>
var Grid = function(width, height) {
...
this.draw = function() {
var canvas = document.getElementById("canvas");
if(canvas.getContext) {
var context = canvas.getContext("2d");
for(var i = 0; i < width; i++) {
for(var j = 0; j < height; j++) {
if(isLive(i, j)) {
context.fillStyle = "lightblue";
}
else {
context.fillStyle = "yellowgreen";
}
context.fillRect(i*15, j*15, 14, 14);
}
}
}
}
}
First write canvas tag and then write script tag. And write script tag in body.
先写canvas标签，再写script标签。并在正文中写入脚本标签。
回答by Spook Wong
You should put javascript tag in your html file.
because browser load your webpage according to html flow, you should put your javascript file<script src="javascript/game.js">after the <canvas>element tag. otherwise,if you put your javascript in the header of html.Browser load script first but it doesn't find the canvas. So your canvas doesn't work.
你应该把 javascript 标签放在你的 html 文件中。因为浏览器根据HTML载入您的网页流量，你应该把你的JavaScript文件<script src="javascript/game.js">后<canvas>元素标签。否则，如果您首先将 javascript 放在 html.Browser 加载脚本的标题中，但它没有找到画布。所以你的画布不起作用。
回答by dif m
You just need to put<script src='./javascript/game.js'></script>after your <canvas>.
Because the browser don't find your javascript file before the canvas
你只需要把<script src='./javascript/game.js'></script>你的 <canvas>放在后面。因为浏览器在画布之前找不到您的 javascript 文件
回答by Darrow Hartman
This might seem like overkill, but if in another case you were trying to load a canvas from js (like I am doing), you could use a setInterval function and an if statement to constantly check if the canvas has loaded.
这可能看起来有点矫枉过正，但如果在另一种情况下您试图从 js 加载画布（就像我正在做的那样），您可以使用 setInterval 函数和 if 语句来不断检查画布是否已加载。
//set up the interval
var thisInterval = setInterval(function{
//this if statment checks if the id "thisCanvas" is linked to something
if(document.getElementById("thisCanvas") != null){
//do what you want
//clearInterval() will remove the interval if you have given your interval a name.
clearInterval(thisInterval)
}
//the 500 means that you will loop through this every 500 milliseconds (1/2 a second)
},500)
(In this example the canvas I am trying to load has an id of "thisCanvas")
（在此示例中，我尝试加载的画布的 ID 为“thisCanvas”）
