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

我收到错误Uncaught TypeError: Cannot read property 'getContext' of null文件中的重要部分是...我想知道由于游戏.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);
                }
            }
        }
    }
}

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

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

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

或者干脆把你的 js 放在<canvas>之后。

把你的

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

您不必包含 JQuery。

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

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

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

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

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

首先写入画布标记，然后写入脚本标记。并在正文中写入脚本标签。

你只需要把<script src='./javascript/game.js'></script>放在你的

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

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

没有必要

仅仅使用jQuery来初始化画布，很明显，世界各地的大多数程序员都不必要地使用它，并且接受的答案就是对此的探索。

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

相关内容

最新更新

热门标签：