2012-04-24 38 views
17

Recibo el error Uncaught TypeError: Cannot read property 'getContext' of null y las partes importantes de los archivos son ... Me pregunto porque game.js está en un directorio a continuación, no puede encontrar el lienzo? ¿Que debería hacer?No se puede leer la propiedad 'getContext' de null, usando canvas

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

Respuesta

45

Supongo que el problema es sus carreras js antes de cargar el html.

Si está utilizando jQuery, puede utilizar la función de lista de documentos para envolver su código:

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

O simplemente poner sus js después de la <canvas>.

+0

Todavía estoy practicando Javascript. ¿Cómo modificaría el archivo html/js para incluir jquery? – Kobi

+1

descargue jquery [aquí] (http://jquery.com/), luego agréguelo a su archivo ''. ponga sus códigos en '$ (función() {});' como lo que he escrito en mi respuesta. – candyleung

+0

También puede mantener la etiqueta del script al final del elemento del cuerpo para cargarla después de que se haya procesado el html si se trata de una página html simple. –

4

No tiene 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: Usted debe poner la etiqueta de script en el cuerpo de la etiqueta ...

1

Usted debe poner javascript etiqueta en tu archivo html porque el navegador carga su página web de acuerdo con el flujo de html, debe poner su archivo de 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 html.Browser cargará el script primero, pero no encontrará el lienzo. Entonces tu lienzo no funciona.

1

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

Primera etiqueta canvas escribir y luego escribir etiqueta de script. Y escribir la etiqueta de script en el cuerpo.

2

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

Cuestiones relacionadas