tripcollor
@tripcollor

Как сделать раскраску на canvas?

Есть вот такой сайт https://www.igraemsa.ru/igry-dlja-detej/risovalki с онлайн раскраской сделано на canvas js. Подскажите каким образом можно сделать нечто подобное? Какие идеи?
  • Вопрос задан
  • 994 просмотра
Решения вопроса 2
sfi0zy
@sfi0zy Куратор тега JavaScript
Creative frontend developer
Если не смотреть на то, как это там реализовано, а подумать своей головой, то я бы сказал, что это в разы проще сделать с помощью SVG. Раскраска - это по сути векторная картинка с большим количеством замкнутых контуров (элементы path), которые еще на этапе рисования объединены в группы (элемент g), которые потом будут краситься в один цвет, клик на группу легко делается стандартным addEventListener('click' ..., а заливка - это атрибут fill с цветом. Ну а выбор карандашей - это стандартная карусель, только не с картинками, а с кучей кружков, на которые можно кликать и выбирать цвет для заливки.
Ответ написан
Комментировать
Xuxicheta
@Xuxicheta
инженер
Конкретно этот пример сделан на движке phaser. Спрайты на рабочей сцене, отслеживается клик по спрайту и закрашивается.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы