Перейти к содержанию
Авторизация  

Маска для изображения с помощью HTML5


Описание

Маска для изображения с помощью HTML5

Небольшая демонстрация на GitHub, показывающая, как можно добавить маску на изображение с помощью HTML5.

http://zedamin.com/w...13/06/masks.jpg [Изображение заблокировано. Пожалуйста, загрузите картинку на наш форум: http://forummaxi.ru/....php?app=ihost.]

Все, что вам нужно сделать, это добавить скрипт canvasmask.js (скачайте его по ссылке ниже) и добавить класс mask к каждому изображению, которому хотите задать маску. Кроме того, необходимо указать пут PNG-файла маски для аттрибита data-mask. Например:

<img src="red-panda.jpg"

alt="Red panda"

class="mask"

data-mask="centerblur.png">

В этом примере картинка centerblur.png это маска для файла red-panda.jpg — принцип прост: берется альфа пиксель от маски и заменяется на альфа пиксель от оригинальной картинки.

Смотрите, как это работает:

http://codepo8.githu...canvas-masking/ (не реклама)



Рекомендуемые комментарии

Комментариев нет

×
×
  • Создать...