Невозможно прочитать свойство getContext null, используя холст

Я получаю ошибку Uncaught TypeError: Cannot read property 'getContext' of null, а важные части в файлах... Мне интересно, так как game.js находится в каталоге ниже, он не может найти 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);
                }
            }
        }
    }
}

Ответ 1

Я думаю, проблема заключается в том, что ваши js запускаются до загрузки html.

Если вы используете jquery, вы можете использовать функцию готовности документа для переноса вашего кода:

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

Или просто поместите свои js после <canvas>.

Ответ 2

Поместите код JavaScript после тега <canvas></canvas>

Ответ 3

Вам не нужно включать JQuery.

В index.html:
<canvas id="canvas" width="640" height="480"></canvas><script src="javascript/game.js"> Это должно работать без JQuery...

Изменить: вы должны поместить тег script в тег тела...

Ответ 4

Вы должны поместить тег javascript в свой html файл. потому что браузер загружает вашу веб-страницу в соответствии с потоком html, вы должны поместить свой javascript файл <script src="javascript/game.js"> после тега элемента <canvas>. в противном случае, если вы поместите свой javascript в заголовок html.Browser load script сначала, но он не найдет холст. Поэтому ваш холст не работает.

Ответ 5

Запишите код таким образом...

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

Сначала напишите тег canvas, а затем напишите тег script. И напишите тег script в теле.

Ответ 6

Вам просто нужно поместить <script src='./javascript/game.js'></script> после вашего <canvas>. Поскольку браузер не находит ваш файл javascript перед холстом

Ответ 7

Это может показаться излишним, но если в другом случае вы пытаетесь загрузить холст из js (как я делаю), вы можете использовать функцию setInterval и оператор if, чтобы постоянно проверять, загружен ли холст.

//set up the interval
var thisInterval = setInterval(function{
  //this if statment checks if the id "thisCanvas" is linked to something
  if(document.getElementById("thisCanvas") != null){
    //do what you want


    //clearInterval() will remove the interval if you have given your interval a name.
    clearInterval(thisInterval)
  }
//the 500 means that you will loop through this every 500 milliseconds (1/2 a second)
},500)

(В этом примере холст, который я пытаюсь загрузить, имеет идентификатор "thisCanvas")