Không thể đọc thuộc tính 'getContext' rỗng, sử dụng canvas

Question

Tôi nhận được lỗi Uncaught TypeError: Cannot read property 'getContext' of null và các phần quan trọng trong tệp là ... Tôi tự hỏi vì game.js nằm trong thư mục bên dưới, nó không thể tìm thấy canvas? Tôi nên làm gì?

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

Tôi đoán vấn đề là js của bạn chạy trước khi html được tải.

Nếu bạn đang sử dụng jquery, bạn có thể sử dụng tài liệu chức năng sẵn sàng quấn mã của bạn:

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

Hoặc chỉ cần đặt js của bạn sau khi <canvas>.

Answer 2

Bạn không phải bao gồm JQuery.

Trong index.html:
<canvas id="canvas" width="640" height="480"></canvas><script src="javascript/game.js"> này nên làm việc mà không JQuery ...

Chỉnh sửa: Bạn nên đặt thẻ script trong thẻ cơ thể ...

Answer 3

Bạn nên đặt javascript trong tệp html của bạn. vì trình duyệt tải trang web của bạn theo luồng html, bạn nên đặt tệp javascript <script src="javascript/game.js"> sau thẻ phần tử <canvas>. nếu không, nếu bạn đặt javascript của bạn trong tiêu đề của html.Browser tải kịch bản đầu tiên nhưng nó không tìm thấy vải. Vì vậy, canvas của bạn không hoạt động.

Answer 4

Viết mã theo cách này ...

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

Đầu tiên thẻ ghi vải và sau đó viết thẻ script. Và viết thẻ script trong cơ thể.

Answer 5

Đặt mã JavaScript của bạn sau thẻ của bạn "<canvas></canvas>"