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

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

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

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

Oниделать сделать, если я позволю 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: JSHTTP: // локальный / мой-игра-URL / :: drawItem :: строка 317 "данные: нет]

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

Ответы на вопрос(1)

Решение Вопроса

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

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

 RwwL03 окт. 2010 г., 18:24
В конце концов, я думаю, что в любом случае я заменю все внешние изображения на URL-адреса данных.
 RwwL03 окт. 2010 г., 17:45
DUH ... нет, так как это практический проект, и я так сосредоточен на новых вещах, которые я изучаю, я полностью забыл очевидное (я просто включил его в нижней части страницы). Поскольку ресурсов изображений не так много, и все они маленькие, запуск init () в window.onload прекрасно справляется с этим. Большое спасибо, Якуб.

Ваш ответ на вопрос