javascript - triangle - w3 canvas drawing




Impossibile leggere la proprietà 'getContext' di null, usando canvas (4)

Devi solo mettere <script src='./javascript/game.js'></script> dopo il tuo <canvas>. Perché il browser non trova il tuo file javascript prima del canvas

Ricevo l'errore Uncaught TypeError: Cannot read property 'getContext' of null e le parti importanti nei file sono ... Mi chiedo poiché game.js si trova in una directory qui sotto, non può trovare canvas? Cosa dovrei fare?

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

Dovresti inserire il tag javascript nel tuo file html. perché il browser carica la tua pagina web in base al flusso html, dovresti inserire il tuo file javascript <script src="javascript/game.js"> dopo il <canvas> dell'elemento. altrimenti, se metti il ​​tuo javascript nell'intestazione dello script di caricamento html.Browser prima, ma non trova la tela. Quindi la tua tela non funziona.


Inserisci il tuo JavaScript dopo il tag "<canvas></canvas>"


Non devi includere JQuery.

Nel index.html:
<canvas id="canvas" width="640" height="480"></canvas><script src="javascript/game.js"> Questo dovrebbe funzionare senza JQuery ...

Modifica: dovresti inserire il tag script nel tag body ...





canvas