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

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

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

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

они do render, если я позволю draw () запустить несколько раз, например...

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

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

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

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

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

1 ответов


Я предполагаю, что вы вызываете init () после запуска события onload объекта window. Проблема в том, что это не гарантирует вам, что данные изображения действительно доступны в этот момент. AFAIR он будет срабатывать после того, как изображения будут извлечены из сети, но затем их все еще нужно декодировать.

лучше всего было бы дождаться события onload изображений.