web-dev-qa-db-fra.com

Impossible de lire la propriété 'getContext' de null, à l'aide de canvas

J'obtiens l'erreur Uncaught TypeError: Cannot read property 'getContext' of null et les parties importantes des fichiers sont ... Je me demande puisque game.js se trouve dans un répertoire ci-dessous, il ne peut pas trouver le canevas? Que devrais-je faire?

./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);
                }
            }
        }
    }
}
javascripthtmlcanvas
25
Kobi

Je suppose que le problème est que votre js s'exécute avant que le code HTML ne soit chargé.

Si vous utilisez jquery, vous pouvez utiliser la fonction de préparation de document pour envelopper votre code:

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

Ou simplement, placez votre js après le <canvas>.

57
C. Leung

Vous n'êtes pas obligé d'inclure JQuery.

Dans l'index.html:
<canvas id="canvas" width="640" height="480"></canvas><script src="javascript/game.js"> Cela devrait fonctionner sans JQuery ...

Edit: Vous devriez mettre la balise script DANS la balise body ...

7
Peter

Mettez votre JavaScript après votre tag "<canvas></canvas>"

6
CrsCaballero

Écrivez le code de cette manière ...

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

Commencez par écrire la balise canvas, puis la balise script. Et écrivez la balise script dans le corps.

1
user5733024

Vous devez mettre une balise javascript dans votre fichier html . Car le navigateur charge votre page Web en fonction du flux html, vous devez placer votre fichier javascript<script src="javascript/game.js"> après la balise <canvas>element sinon, si vous mettez votre javascript dans l'en-tête du script de chargement html.Browser en premier, mais qu'il ne trouve pas le canevas. Donc, votre toile ne fonctionne pas. 

1
Spook Wong

Il vous suffit de mettre<script src='./javascript/game.js'></script> après votre <toile> . Parce que le navigateur ne trouve pas votre fichier javascript avant la toile.

0
dif m