Добавление объекта canvas-sprite на холст?

Question

Я играл с HTML5, холстом и спрайтами, и мне удалось немного запутаться. Мне было интересно, есть ли кто-нибудь с немного большим опытом, чем я, который мог бы помочь мне «настроить» это (и также заставить его работать).

У меня есть весь код на GitHub https://github.com/AlexChesser/jsSprite и я разместил здесь живое демо http://chesser.ca/jsSprite

Из тестов 01 и 02 видно, что я могу отправить Минотавра непосредственно на холст на странице, я могу анимировать Минотавра на холсте ... но когда я пытаюсь создать Минотавр и добавить его на другой холст - я получаю пустой экран.

(пытается реализовать https://github.com/AlexChesser/jsSprite/blob/master/03-animated_minotaur_on_canvas.php)

Я знаю, что это должно быть что-то маленькое и глупое, что я здесь делаю неправильно, но я смотрел на это часами и не могу отследить проблему.

Я подумал, что постараюсь опубликовать здесь, чтобы посмотреть, есть ли кто-нибудь, кто может увидеть это «за один раз» И , чтобы, возможно, дать мне знать, если есть что-нибудь, что я могу сделать лучше.

Если вы заинтересованы в том, чтобы немного углубиться в эту тему, львиная доля кода для этого взята из блога http://www.johnegraham2.com/web-technology/html-5-canvas-tag-sprite-animation-demo/

В любом случае, возможно, это одна из тех вещей, которая «приходит к вам», как только вы немного отошли от проблемы. Скрестив пальцы, я могу это понять, или кто-то еще может дать мне небольшой толчок в правильном направлении.

Спасибо! :)

Answer 1

Как сказал Саймон Саррис, вы рисуете холст слишком рано. Вам нужно либо выполнить цикл до готовности спрайта, либо добавить обратный вызов к вашему спрайту, который вызывается после его отрисовки.

У вас уже есть функция, прикрепленная к событию onload изображения, вы должны сделать что-то подобное для всего спрайта.

Answer 2

Я только что прошел ваш код.

MainContext.drawImage(m.canvas, 0, 0, m.width, m.height);

происходит до того, как вызывается drawFrame, поскольку изображение еще не готово.

Так чтоmainContext.drawImage рисует холст, на котором еще ничего не нарисовано.

Затем холст спрайта загружен и готов к работе, но уже слишком поздно!

Для подтверждения вы можете позвонить MainContext.drawImage(m.canvas, 0, 0, m.width, m.height); в консоли браузера, и вы увидите, как появляется минотавр.