Canvas DrawImage не рисует изображения в первый раз - PullRequest
Новая
       14

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

6 голосов
/ 03 октября 2010

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

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

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

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

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

1 Ответ

8 голосов
/ 03 октября 2010

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

Лучше всего вместо этого дождаться события загрузки изображений.

...