Вопрос по html, javascript, directory – HTML5 Canvas не работает во внешнем файле JavaScript

6

Я написал этот код на JavaScript и прекрасно работает, когда я включаю его в свою страницу index.html:

<canvas id="bannerCanvas" width="960" height="200">
    Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

   var canvas = document.getElementById("bannerCanvas");
   var context = canvas.getContext("2d");
     context.beginPath();
     context.moveTo(25,25);
     context.lineTo(355,55);
     context.lineTo(355,125);
     context.lineTo(25,125);
     context.moveTo(465,25);
     context.fill();
};  
</script>

... однако, когда я помещаю его во внешний файл JavaScript, он не работает! В начале страницы указателя я объявил это:

 <script type="text/javascript" src="JavaScript/functionality.js">
 </script>

И я сохраняю этот файл functions.js в каталоге JavaScript, я пытался выполнить другие функции JS в этом файле, чтобы проверить страницу индекса, и JS подключены, и они ... Ответ, вероятно, смотрит мне в глаза, но по какой-то причине я не вижу этого!

Любая помощь очень ценится, спасибо.

РЕДАКТИРОВАТЬ: Я использовал Firebug, и он не дает мне ошибок, когда я использую код на странице индекса, я вижу форму, которую я хочу, еще при использовании внешнего файла JS, я просто вижу большой черный прямоугольник.

Ваш Ответ

4   ответа
2

Если он находится в заголовке, вы загружаете его до визуализации элемента canvas. Посмотрите на консоль JavaScript, и вы увидите пустую или неопределенную ошибку.

Добавьте тег script в том же месте, где он работает со встроенным кодом. JavaScript не должен жить в голове, и некоторые разработчики рекомендуют, чтобы он всегда был последним в теле.

Другое решение - запустить скрипт на готовом документе или в окне загрузки.

Спасибо за ваш ответ. Я хочу использовать внешний JS-файл, я использовал внешние файлы раньше, и никаких проблем не возникало, это действительно расстраивает. Tim Johnstone
Переместите внешний файл точно туда, где был исходный код, он будет работать.
14

причина этого в том, что скрипт запускается до визуализации элемента canvas.

Чтобы это исправить, добавьте это во внешний файл.

document.addEventListener('DOMContentLoaded',domloaded,false);
function domloaded(){
    // your code here.
}

или с помощью jquery

$(function(){
    // your code here.    
});
Спасибо :) вот билет! Кажется, теперь это работает, и я разместил объявление типа скрипта внизу страницы. Спасибо всем, кто помог !! Tim Johnstone
4

Вfunctionality.jsпопробуйте обернуть ваш код в

window.onload = function() {
// code here
}

так что он не будет выполняться до тех пор, пока страница не загрузится.

Спасибо за ваш комментарий, я пытался сделать именно это, но безрезультатно :( Tim Johnstone
1

Не вставляйте заголовок. Когда вы помещаете код в заголовок, он запускается, когда на странице еще нет элемента canvas.

Просто поместите скрипт & lt; .... перед & lt; / html & gt; это гарантирует, что все работает при загрузке страницы, или вы можете поместить свой код в событие onloadwindow.onload=function(){start thing here}
Спасибо за ваш комментарий, код находится в пределах & lt; body & gt; теги, когда они находятся на странице index.html и работают нормально, просто когда я пытаюсь связать файл JS в заголовке, он не хочет работать ... Tim Johnstone

Похожие вопросы