Nie można odczytać właściwości getContext o wartości zerowej, używając obszaru roboczego

Question

Pojawia się błąd Uncaught TypeError: Cannot read property 'getContext' of null, a ważne części w plikach są ... Zastanawiam się, skoro plik game.js znajduje się w katalogu poniżej, nie może znaleźć obszaru roboczego? Co powinienem zrobić?

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

Myślę, że problemem jest twoje js biegnie przed html jest załadowany.

Jeśli używasz jQuery, można użyć funkcji gotowy dokument zawinąć kod:

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

Albo po prostu umieścić swoje js po <canvas>.

Answer 2

Nie musisz uwzględniać JQuery.

W index.html:
<canvas id="canvas" width="640" height="480"></canvas><script src="javascript/game.js"> To powinno działać bez JQuery ...

Edycja: Należy umieścić znacznik skryptu w tagu ciała ...

Answer 3

Należy umieścić javascript tag w pliku html. ponieważ przeglądarka ładuje twoją stronę zgodnie z przepływem html, powinieneś umieścić plik javascript <script src="javascript/game.js"> po tagu elementu <canvas>. w przeciwnym razie, jeśli umieścisz swój javascript w nagłówku skryptu ładującego html.Browser, ale nie znajdzie on płótna. Twoje płótno nie działa.

Answer 4

wprowadź kod w ten sposób ...

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

pierwszy znacznik zapisu płótno, a następnie napisać tag skryptu. I napisz znacznik skryptu w treści.

Answer 5

Połóż JavaScript po tagu "<canvas></canvas>"