Question

无法使用画布读取 null 的属性“getContext”

2012-04-24

257487

javascript html canvas

我收到错误 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);
                }
            }
        }
    }
}

Answer 1

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

如果你使用 jquery，你可以使用文档就绪函数来包装你的代码：

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

或者简单地将你的 js 放在 <canvas> 之后。

Answer 2

将 JavaScript 代码放在标签 <canvas></canvas>

之后

CrsCaballero

2016-11-15

Answer 3

您不必包含 JQuery。

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

编辑：您应该将脚本标记放在 body 标记中...