Я работаю над простой игрой на JavaScript с использованием холста HTML5. Это очень типичная настройка игрового цикла, включающая: функцию
При запуске этого проекта у меня был вызов 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.