Question

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

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

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

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

或者只是将你的js放在<canvas>之后。

Answer 2

将您的JavaScript放在标记"<canvas></canvas>"

之后

Answer 3

你不必包含JQuery。

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

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

Answer 4

我假设您在<head>标记内声明了JS文件，以便使其像标准一样保持一致，然后在JS中确保在加载页面后初始化画布：

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

不需要仅使用jQuery来初始化画布，这很明显，全世界大多数程序员都不必要地使用它，对此，可以接受的答案就是一个探究。

Answer 5

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

Answer 6

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

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

首先编写canvas标签，然后编写脚本标签。并在正文中编写脚本标记。

Answer 7

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

Answer 8

这似乎有些矫kill过正，但是如果在另一种情况下，您试图从js加载画布（例如我正在做的事情），则可以使用setInterval函数和if语句来不断检查画布是否已加载。 / p>

//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”）

使用canvas无法读取null的属性'getContext'

8 个答案: