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 изображений.