0

Хочу создать блок с двумя картинками 1 поверх другого. При клика на изображения выделенная область мишки верхнего слоя должно стать прозрачным и показывать нижний слой картинки.
При этом курсор мишки становиться фигуркой, кокой нибудь губки.
То есть нужно создать имитацию ластика что-ли, чтоб верхний слой очистить и показывать нижний.
Так вот можно ли обойтись без flash на html5, html, javascript? или в каком направлении мне искать?
Если есть примеры дайте ссылку. А если все решается куском когда и если можете покажите как?
Надеюсь ясно выразился, Спасибо.

5
  • Конечно можно и на html5, но если есть опыт на флеш - можно и на флеш (пока он не умер). 19 июл 2016 в 9:44
  • @VladimirGamalian опыта на флеш нету но в html5 разбираюсь но вот не могу понять как это можно на html5 реализовать. Можете указать путь от чего начать или пару слов как можно реализовать что, какие элементы использовать? 19 июл 2016 в 9:59
  • 1
    Ну тогда как обычно - рисуете на канве, там же стираете, вот можете здесь подсмотреть демка и исходниками (включая ластик для стирания) williammalone.com/articles/… 19 июл 2016 в 10:22
  • @VladimirGamalian Ваш пример оказался очень интересным но, я просмотрел и ластик там просто рисует белым цветом. А нет каких нибудь примеров в котором ластик делает выделенную часть изображения прозрачным? 19 июл 2016 в 10:54
  • Может вы другой пример смотрите, там несколько. Вот gyazo.com/dd240154960f3c368881bcb77d99c4d7 на уточке сначала фиолетовым рисую, затем ластиком линию провожу - получается белая линия, но с уткой, т.е. это стирается фиолтеовая закраска, а утка остается. 19 июл 2016 в 11:21

2 ответа 2

1

Пройдитесь по этим ссылкам:)

codepen.io/progrape/pen/XXBwWe - Ваш случай

jsfiddle.net/ArtBIT/WUXDb/1/

https://stackoverflow.com/questions/25907163/html5-canvas-eraser-tool-without-overdraw-white-color

0

Просмотрев похожие вещи создал и улучшал решения этой проблемы. Решения в другом вопросе по ссылке Нужно улучшать очистку на canvas

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.