холст drawImage не рисует изображения в первый раз

Я работаю над простой игрой на JavaScript с использованием холста HTML5. Это очень типичная настройка игрового цикла, включающая: функцию

  • init (), которая инициализирует объекты для использования в игровом поле, рандомизирует некоторые начальные позиции x / y и аналогичные задачи настройки.
  • Функция draw (), которая рисует все игровые объекты , включая несколько простых форм холста и несколько изображений
  • setInterval для вызова отрисовки каждые 25 миллисекунд

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

Они делают рендеринг, если я запускаю draw () несколько раз, например ...

    var previewDraw = setInterval(draw, 25);
    var stopPreviewDraw = function() { clearInterval(previewDraw) }
    setTimeout(stopPreviewDraw, 100)

... но это кажется глупым. Почему не работает ни один вызов draw ()? Я зарегистрировал объекты в консолях Chrome и Firefox, и все в них выглядит нормально; у них уже есть соответствующие пути img src и начальные значения x / y, доступные для передачи для назначения новому Image (), который создается и затем вызывается через мой метод canvas.2dcontext.drawImage ().

Я тестирую это в Chrome 6 и Firefox 3.6.10, и они оба озадачили меня таким поведением. В консоли Chrome не отображаются ошибки или проблемы, но если я попытаюсь вызвать draw () только после того, как Firefox выдаст следующее:

неперехваченное исключение: [Exception ... "Компонент вернул код ошибки: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]» nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http: // localhost / my-game-url / :: drawItem :: line 317" data: no]

Мой Google поиск этой ошибки предполагает поврежденное изображение, но все они без проблем открываются в Preview и Photoshop.

6
задан PeeHaa 2 January 2012 в 00:54
поделиться