javascript - whether - No se puede leer la propiedad ''getContext'' de null, usando un lienzo

getcontext no funciona

Question

Me sale el error Uncaught TypeError: Cannot read property ''getContext'' of null y las partes importantes de los archivos son ... Me pregunto, ya que game.js está en un directorio a continuación, ¿no puedo encontrar el lienzo? ¿Qué tengo que hacer?

./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

Deberías poner una etiqueta javascript en tu archivo html. como el navegador carga su página web de acuerdo con el flujo html, debe colocar su archivo javascript <script src="javascript/game.js"> después de la etiqueta del elemento <canvas> . de lo contrario, si coloca su javascript en el encabezado de la secuencia de comandos de carga html.Browser pero no encuentra el lienzo. Así que tu lienzo no funciona.

Answer 2

Escribe código de esta manera ...

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

Primero escribe la etiqueta del lienzo y luego escribe la etiqueta del script. Y escribe la etiqueta del script en el cuerpo.

Answer 3

No tienes que incluir JQuery.

En el index.html:
<canvas id="canvas" width="640" height="480"></canvas><script src="javascript/game.js"> Esto debería funcionar sin JQuery ...

Editar: Deberías poner la etiqueta de script EN la etiqueta del cuerpo ...

Answer 4

Ponga su JavaScript después de su etiqueta "<canvas></canvas>"

Answer 5

Supongo que el problema es que tu js se ejecuta antes de cargar el html.

Si está utilizando jquery, puede usar la función de preparación de documentos para ajustar su código:

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

O simplemente ponga su js después de las <canvas> .