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

問題は、htmlがロードされる前にjsが実行されることだと思います。

jqueryを使用している場合は、documentready関数を使用してコードをラップできます。

$(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なしで機能するはずです...

編集：スクリプトタグをbodyタグに入れる必要があります...

于 2015-06-05T02:36:45.607 に答える
3

htmlファイルにjavascriptタグを入れる必要があります。ブラウザはhtmlフローに従ってWebページをロードするため、要素タグ<script src="javascript/game.js"> の後にjavascriptファイルを配置する必要があります。<canvas>それ以外の場合は、JavaScriptをhtml.Browserのヘッダーに最初にロードしますが、キャンバスが見つかりません。したがって、キャンバスは機能しません。

于 2015-09-09T15:49:34.550 に答える
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);
                }
            }
        }
    }
 }

最初にcanvasタグを書き込み、次にスクリプトタグを書き込みます。そして、本文にスクリプトタグを記述します。

于 2016-03-21T12:36:21.707 に答える
3

<script src='./javascript/game.js'></script><canvas>の後に置く必要があります。ブラウザはキャンバスの前にJavaScriptファイルを見つけられないため

于 2018-12-07T14:22:22.590 に答える
2

タグ内でJSファイルが宣言されていると仮定します。<head>これにより、標準のように一貫性が保たれます。次に、JSで、ページが読み込まれた後にキャンバスの初期化が行われるようにします。

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

キャンバスを初期化するためだけにjQueryを使用する必要はありません。世界中のほとんどのプログラマーが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 に答える