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

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

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

如果您使用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

您应该将 javascript 标签放入 html 文件中。因为浏览器根据 html 流程加载您的网页，所以您应该将 javascript 文件

<script src="javascript/game.js">

放在

<canvas>

元素标签之后。否则，如果您将 JavaScript 放在 html.Browser 的标头中，则首先加载脚本，但它找不到画布。所以你的画布不起作用。

Answer 5

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

<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标签，再写script标签。并在body中写入script标签。

Answer 6

您只需将

<script src='./javascript/game.js'></script>

放在

Answer 7

我假设您的 JS 文件在

<head>

标记内声明，因此它保持一致，就像标准一样，然后在您的 JS 中确保画布初始化是在页面加载之后之后：

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

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

Answer 8

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

Answer 9

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript games</title>
    <script src="index.js" defer></script>

<<<< THIS IS THE FIX ON MY COMPUTER add the word defer

</head>
<body>
    <canvas></canvas>
    
    
</body>
</html>

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

问题描述投票：0回答：9

9个回答

最新问题

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

问题描述 投票：0回答：9

9个回答

最新问题

问题描述投票：0回答：9