63

我收到错误Uncaught TypeError: Cannot read property 'getContext' of null，文件中的重要部分是......我想知道因为 game.js 在下面的目录中，它找不到画布？我应该怎么办？

./index.html:

<canvas id="canvas" width="640" height="480"></canvas>

./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);
                }
            }
        }
    }
}
4

8 回答 8

102

我想问题是你的 js 在加载 html 之前运行。

如果您使用的是 jquery，则可以使用 document ready 函数来包装您的代码：

$(function() {
    var Grid = function(width, height) {
        // codes...
    }
});

或者干脆把你的 js 放在<canvas>.

于 2012-04-24T04:37:42.317 回答
24

把你的 JavaScript 代码放在你的标签之后<canvas></canvas>

于 2016-11-15T20:30:53.970 回答
13

您不必包含 JQuery。

在 index.html 中：
<canvas id="canvas" width="640" height="480"></canvas><script src="javascript/game.js"> 这应该在没有 JQuery 的情况下工作......

编辑：您应该将脚本标签放在正文标签中......

于 2015-06-05T02:36:45.607 回答
3

以这种方式编写代码...

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

先写画布标签，再写脚本标签。并在正文中写入脚本标签。

于 2016-03-21T12:36:21.707 回答
3

您应该将 javascript 标记放在您的 html 文件中。因为浏览器会根据 html 流加载您的网页，所以您应该将您的 javascript 文件放在<script src="javascript/game.js"> 元素<canvas>标记之后。否则，如果您将 javascript 放在 html.Browser 加载脚本的标题中，但它没有找到画布。所以你的画布不起作用。

于 2015-09-09T15:49:34.550 回答
3

你只需要放在<script src='./javascript/game.js'></script>你的 <canvas> 之后。因为浏览器在画布之前没有找到你的 javascript 文件

于 2018-12-07T14:22:22.590 回答
2

我假设你在<head>标签内声明了你的 JS 文件，所以它保持一致，就像标准一样，然后在你的 JS 中确保画布初始化是在页面加载之后：

window.onload = function () {
    var myCanvas = document.getElementById('canvas');
    var ctx = myCanvas.getContext('2d');
}

没有必要仅仅使用 jQuery 来初始化画布，很明显世界各地的大多数程序员都在不必要地使用它，而公认的答案就是对此的探索。

于 2020-06-07T15:06:17.497 回答
1

这可能看起来有点矫枉过正，但如果在另一种情况下您试图从 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)

（在此示例中，我尝试加载的画布的 id 为“thisCanvas”）

于 2019-05-20T01:02:42.450 回答