Раскраска на сайте (canvas + javascript)

Веб-программированиеЗакрыт1 заявка482 просмотра
Найдите исполнителя для вашего проекта прямо сейчас!
Разместите заказ на фриланс-бирже и предложения поступят уже через несколько минут.

Нужно сделать для сайта (адаптировать готовые примеры или сделать с 0) раскраску:

  • в рамках определенной области на сайте будет располагаться png изображение с контуром, которое нужно раскрасить разными цветами;
  • ползунок для выбора цвета из палитры цветов;
  • ползунок для выбора размера кисти в заданном диапазоне;
  • переключатель / 2 кнопки выбора: кисть или ластик (со-но ластик стирает только то, что нужно, а не очищает весь рисунок);
  • кнопка очистить весь рисунок;
  • кнопка экспорта изображения/сохранения на устройство, которое получилось нарисовать
Из дополнительных требований:

  • Нужно что бы это работало во всех современных браузерах + на мобильном телефоне
  • Нужна кнопка переключения режима рисования, что бы пользователь, например, на мобильном телефоне мог скролить сам сайт или же рисовать
  • Можно пока сделать без какого либо оформления, просто рабочий инструмент, но с возможностью адаптировать дизайн под сайт
Вот примеры уже готовых реализаций, из которых можно "собрать" то что нужно:

- http://websketches.ru/blog/raskrshivaem-kartinki-html5-canvas-javascript#demo-complete

- https://gohtml.ru/js/152-javascript-paint-s-ispolzovaniem-canvas

- https://karmazzin.gitbook.io/eloquentjavascript_ru/chapter19#prostaya-programma-risovaniya

- http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

JavascriptHTML
2 года назад
treneroff
Дмитрий 
43 годаЭстония
2 года в сервисе
Был
год назад