Nano Hash - криптовалюты, майнинг, программирование

HTML5 Canvas: отрисовка не определена

Я пытаюсь следовать руководству Mozilla HTML5 Canvas здесь. но я получаю сообщение об ошибке:

Uncaught ReferenceError: draw is not defined

У меня есть свой сценарий как таковой:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

 <script type="application/javascript">
$(function() {

function draw() {
      var canvas = document.getElementById("main");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }


});

</script>


</head>
 <body onload="draw();">
   <canvas id="main" width="150" height="150"></canvas>


</body>

Я экспериментировал с размещением скриптов как до, так и после элемента холста, но не получил никаких изменений.

Кто-нибудь знает, что я делаю неправильно?

javascript canvas html html5-canvas
29.07.2013

  • Пожалуйста, поделитесь своим полным исходным кодом; потому что в вышесказанном нет ничего плохого. Убедитесь, что ваша функция draw() определена в <head> section вашей страницы. В противном случае событие загрузки не найдет его! 29.07.2013
  • @Eric Ive добавил это выше 29.07.2013

Ответы:


1

Вы неправильно используете jQuery здесь. Теперь ваш метод draw() доступен (и объявлен) только в методе ready(), вызываемом jQuery. Сделайте функцию глобальной и пропустите часть jQuery.

 <script type="text/javascript">
   function draw() {
      var canvas = document.getElementById("main");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
  }
</script>

Вы видите, что $(function(){ ... }); является сокращением для $(document).ready(), которые используются в качестве обратного вызова, когда все элементы DOM загружены. В вашем случае это не нужно, так как ваш метод draw() все равно вызывается событием загрузки тела! :-)

29.07.2013
  • Ах, я вижу - так как только тело загружается (загружается), оно запускает функцию? Это единственный способ сделать это с Canvas? 29.07.2013
  • Вы должны убедиться, что ваше DOM-дерево загружено (то есть ваш сайт), прежде чем вызывать метод draw(). Либо вы делаете это, либо можете вызвать метод draw() внутри файла $(function() { ... });. Убедитесь, что ваш метод рисования всегда определен глобально. 29.07.2013

    • 2

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

    <script type="application/javascript">
$(function() {
      var canvas = document.getElementById("main");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
});
</script>

    Тогда ваше тело будет освобождено:

    <body>
<canvas id="main" width="150" height="150"></canvas>
<!-- ... -->
    29.07.2013
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..