На сайта можно встретить много интересных фишек, которые удивляют пользователей своей оригинальностью. Это и делает ваш сайт более уникальных, и не похожим на все остальные. На каждом сайте можно встретить множество изображений, которые красиво организованы, и несут посетителю дополнительную информацию, но порой не все изображения могут привлечь внимание. В данном уроке мы рассмотрим как создать интересную искажающею линзу для изображений с помощью HTML5. Данный эффект подойдет для различного рода изображений, и придаст им своеобразности..

Для начала мы рассмотрим разметку HTML. Для создания такого эффекта нам понадобиться два объекта canvas, один из которых мы будем использовать для изображения, а второй, собственно, для самой искажающей линзы. Вот, что с этого получилось:

Следующем шагом будет настройка стилей CSS. Объект который используется для линзы должен находиться поверх изображения, также мы задаем параметры самого изображения:

Последним шагом будет инициализация скрипта, который будет подготавливать данные два объекта canvas и два объекта context . Затем происходит загрузка фонового изображения и вывод его в первом контексте.

После этого подготавливается хэш таблица,  для трансформаций сферы: aMap. В конце запускается таймер, который обновляет сцену. Функция updateScene обновляет координаты объекта сферы и выводит ее во втором контексте.

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