Задать вопрос
@h88p
Pre-Junior HTML Developer
javascript

Анимация в canvas на JS с помощью нескольких спрайтов?

Везде примеры с одной картинкой, где ее разделяют на части и вытаскивают друг за другом кадры.
Мне же нужно сделать анимацию из нескольких картинок.
Вот пример
Как лучше реализовать на канвасе? Не присваивая каждую картинку к переменной и дальнейшей ее отрисовкой, а циклом пройдясь по массиву из путей к каждой картинке
P.S Без использования сторонних библиотек
  • Вопрос задан
  • 1202 просмотра
3 комментария
Подписаться Простой 3 комментария
Решения вопроса 2
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
Ну, отличие способа со спрайтом от способа с картинками лишь в том, что вместо перемещения координат спрайта в функции drawImage, вы должны менять передаваемый объект Image, предварительно загруженный в массив.
Ответ написан
Комментировать
Комментировать
hzzzzl
@hzzzzl
начальный код я стырил отсюда, то есть по идее он делает не то что нам надо (вернее, не только то, что надо)
https://developer.mozilla.org/en-US/docs/Web/API/C...

добавляешь урлы на картинки в массив, по таймеру меняешь image.src у рисуемой картинки
https://codepen.io/anon/pen/vPMVGr
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 3
Sanasol
@Sanasol Куратор тега JavaScript
нельзя просто так взять и загуглить ошибку
Проще и лучше объединить картинки в одну. Это и будет называться спрайт.

Это общепринятая практика, не считая того что не будет возможных лагов с загрузкой кучи картинок вместо одной со всеми фреймами сразу.

И тогда любой гайд по анимации вам поможет.
Ответ написан
Комментировать
Комментировать
profesor08
@profesor08 Куратор тега JavaScript
Вот загружаешь свои 17 картинок в 17 объектов и рисуешь по очереди.
Ответ написан
Комментировать
Комментировать
@GreatRash
www.williammalone.com/articles/create-html5-canvas...
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Изменить данные в инструкции
16 апр. 2024, в 14:20
500 руб./за проект
Сделать редизайн MODX
16 апр. 2024, в 14:03
5000 руб./за проект
Создать GIF
16 апр. 2024, в 13:17
5000 руб./за проект
Ещё заказы