Моя страница Раскраска
 

Понимаю, что не всё ешё здорово и программу ещё буду доделывать и переделывать. Ваши советы и Ваше мнение. http://clecar.ru/risovalki/raskraska/ris.html

К сожелению, продолжаю забавлятся с этой страницей в одиночестве. Однако удалось наконец-то добится безпрерывной линии, теперь можно предлогать посетителям подписывать онлайн изображения на их компьютерах. http://clecar.ru/risovalki/raskraska/ris.html Не могу пока понять почему не все цвета удаляются после фиксации. И вторая серьёзная проблема не получается стирать окружностью. Уже когда всё сделано попалось вот это в интернете http://websketches.ru/blog/raskrshiv...vas-javascript Но как говорится смотрю в книгу и вижу фигу. Стар вмдно уже не дотягиваю.

С круглым ластиком получилось. Хороший совет дали в разделе общии вопросы яваскрипт тема Очистка канвас.

Совет не дам. А мнение скажу, мне понравился сайт, вот только озвучка цвета напугала. :lol:

От озвучки в каком месте отказаться?

Не верно написал. Вопрос совсем убрать?

Сама идея не плохая! Просто при выборе цвета, не ожидал такого поведения, особенно когда включен звук выше среднего это может напугать ребенка для которого этот сайт и создан. Возможно, стоит как-то предупредить пользователя или хотя бы 2 кликом по цвету выключить звук. А так идея хорошая. :yes:

да какого ребёнка? даже я напугался

звук в браузере это всегда плохая идея

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

Да звук стал совсем не уместен, когда РИСУЕМ преобразовалась в раскраску с библиотекой. Переделываю заново, скоро в ближайшии дни заменю на новую версию. Подзастрял с заливкой, полноценную вероятно так и не зделаю. То хорошо заливает но почти на всех раскрасках убегает куда не надо, то только от клика в пределах видимости. Вероятно так для специально не подготовленных раскрасок и надо сделать.

Поместил новую версию, для тестирования. Так получается что с Канвасом результат по всей программе можно увидеть только на сайте. Звук удалил полностью. Не доделана ещё заливка. И возможно над дизайном и интерфейсом надо ещё поработать. http://clecar.ru/risovalki/raskraska/ris.html

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

Да ещё программа не созрела. Решаю проблемы медленно, с заливкой кажется справился, вроде работает. С выбором объектов чувствую также долго ещё предстоит повозится.

Взялся ещё раз переделать свою раскраску, изначальная мысль была избавиться от озвучки, да как то жалко стало и меня понесла нечистая озвучивать все известные краски энергии хватило только на 110 красок. А потом по умолчанию сделал звук отключен. http://clecar.ru/risovalki/raskraska/ris.html

А для решения японских кроссвордов, по моему проще и удобней обойтись без canvas. http://clecar.ru/risovalki/mozaika/mozaika.html

Добавить бы возможность сохранять результат на диск... И точки сохранения, чтоб промежуточные результаты не терять.

А если раскраска для детей, то у девочки с тряпкой надо бы юбку удлинить, а то, извините, трусики видно.

Белый шум спасибо, с юбкой проблем нет, а с сохранением на диск
пока не понимаю, как это делать.

Юбку поменял. А вот если бы получилось сохранять на диск, вполне можно было бы сделать в таком духе программу для рисования и прокрутки мультиков. Можно конечно сохранять по одному рисунку, но это ерунда. Может есть способ сохранения, всех кадров canvas. Первым кликом обозначил, куда сохранять и сгрузил туда сразу все рисунки. Чтобы было понятней, что я хочу, добавил кнопку в столбик Все предыдущие кадры выстраиваются в столбик под рабочим полотном.

Многие подумают, а много ли комп потянет кадров. Мой относительно старый и слабый тянет до 2000 кадров, проверено на моём плеере баловство http://clecar.ru/raznoe/plebal.html

Либо анимированный гиф - https://habrahabr.ru/post/173773/
, либо сохранять все кадры в одной png-картинке, расположив их в столбик.

Гиф, сложновато. А идею с одной картинкой png, опробую. Забавно.

Тянет только до 800 на 32000px, в моей раскраске это 40 кадров. Но к этому ещё вернусь, не экспериментировал с размерами кадра.

Можно ещё попробовать apng (анимированный png) - https://gist.github.com/yurydelendik...63bf9b0631b820

"Каждый кадр только хранит отличия от предыдущего (на манер GIF)." - https://ru.wikipedia.org/wiki/APNG - идеально для вашей задачи, файл будет весить меньше чем все кадры в столбик.

Только поддержка браузерами не очень: https://caniuse.com/#search=apng

- https://caniuse.com/#feat=canvas (вкладка "Known issues"). Для других систем/браузеров лимиты не указаны.

Так дело не в весе пока а в размере по стороне. А мой файл из 40 кадров получился всего 818 кб. Спасибо, я же в данном случае могу гораздо круче apng, и благодаря вашему выражению "Каждый кадр только хранит отличия от предыдущего (на манер GIF).", понял а зачем я пытаюсь сохранять кадры, можно ведь отдельно только отличия на том же полотне. Так что приступаю к новой программе, где это и попытаюсь воплотить.

Если вам свой формат файла делать, то можно ещё круче - только сами действия записывать:
1) ведро с цветом C1 применить к точке X1,Y1
2) линия цветом C2 и шириной R2 по точкам X2,Y2 - X3,Y3 - X4,Y4
и т.д.

Да именно это мне и пришло в голову, когда прочитал ваш ответ. Ведь в одном пикселе 4 числа по 255 значений. Шифруешь все действия в пиксели файла PNG, а при загрузке обратно в программу дешифруешь. Я поставил вам плюс за участие и помощь.

Совет не дам. А мнение скажу, мне понравился сайт, вот только озвучка цвета напугала.