javascript неправильно связывается с HTML. как исправить?

0

здесь мой HTML

<html>

<head>
    <meta charset="UTF-8" />        
    <script src="script.js"></script>

</head>

....

и здесь javascript. все было в порядке, когда у меня был скрипт inline, но когда я перемещаю его за пределы html файла, он прерывается. просто простой рисунок холста html, но не уверен в этом. идеи?

// Canvas 1

var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");

photo = document.getElementById("red");

function drawImage() {
context.drawImage(photo, 0, 0);
}

window.addEventListener("load", drawImage, false);

// Canvas 2
var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");

context2.fillStyle = "darkRed"; 
context2.fillRect(0, 2, 800, 500);
context2.moveTo(0, 0);
context2.lineTo(400, 300);


// Canvas 3 

var canvas3 = document.getElementById("canvas3");
var context3 = canvas3.getContext("2d");

photo3 = document.getElementById("red2");

function drawImage() {
    for (var x = 0; x < 6; x++) {
        for (var y =0; y < 6; y++ ) {
            context3.drawImage(photo3, x * 100, y * 75, 100, 75);
        }
    }

}

window.addEventListener("load", drawImage, false);
  • 0
    Находится ли script.js в той же директории, что и ваш HTML-файл? Есть ли в отладчике вашего браузера какие-либо ошибки JavaScript или что-то сказано о невозможности загрузить скрипт?
  • 0
    @mason yes для имени файла, и я получаю: "TypeError: 'null' не является объектом (оценивает 'canvas.getContext')"
Показать ещё 2 комментария
Теги:

2 ответа

3
Лучший ответ

Поскольку вы загружаете скрипт в <head>, все выполняется до загрузки DOM, поэтому все вызовы getElementBuId() не работают. Вам нужно либо поместить <script> в конец <body>, либо поместить весь код в функцию window.onload, например

window.onload = function() {
    var canvas = document.getElementById("canvas1");
    var context = canvas.getContext("2d");

    photo = document.getElementById("red");

    function drawImage() {
        context.drawImage(photo, 0, 0);
    }

    window.addEventListener("load", drawImage, false);
    ...
};

Это имеет дополнительное преимущество, не загрязняя глобальное пространство имен.

Поделиться
  • 0
    Спасибо! это исправило большую часть этого. все еще есть эта ошибка, хотя: "TypeError: 'null' не является объектом (оценка 'canvas.getContext')"
  • 0
    Тогда в документе не должно быть элемента с id="canvas1" . Проверьте на опечатку где-нибудь.
0

Я повторю то, что сказал Бармар. В общем, я загружаю свой JavaScript в конце html для повышения производительности, и поэтому я уверен, что у меня не будет этой проблемы.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню