Эффект искажающей линзы с помощью HTML5

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

<div>

</div>

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

.container {

height: 530px;

margin: 50px auto;

position: relative;

width: 924px;

z-index: 1;

background-color: #f3f4ef; border: 5px solid #dedede;

}

#obj {

position: absolute;

z-index: 2;

}

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

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

100

101

102

103

104

105

106

107

108

109

110

var canvas, ctx;

var canvasObj, ctxObj;

var iDstW = 256;

var iDstH = 256;

var iXSpeed = 4;

var iYSpeed = 3;

var iLastX = iDstW / 2;

var iLastY = iDstH / 2;

var oImage;

var aMap = [];

var aMapT = [];

var aBitmap;

var mathTwirl = function(px,py) {

var x = px - iDstW / 2;

var y = py - iDstH / 2;

var r = Math.sqrt(x * x + y * y);

var maxR = iDstW / 2;

if (r > maxR) return {'x':px, 'y':py, 't': 1};

var a = Math.atan2(y, x);

a -= 1 - r / maxR;

var dx = Math.cos(a) * r;

var dy = Math.sin(a) * r;

return {'x': dx+iDstW/2, 'y': dy+iDstH/2, 't': 1.5}

}

window.onload = function(){

// Загружаем фоновое изображение

oImage = new Image();

oImage.src = 'images/bg.jpg';

oImage.onload = function () {

// Создаем объекты canvas и context objects

canvas = document.getElementById('slideshow');

ctx = canvas.getContext('2d');

canvasObj = document.getElementById('obj');

ctxObj = canvasObj.getContext('2d');

// Очищаем контекст

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

// Выводим исходное изобаржение

ctx.drawImage(oImage, 0, 0);

aBitmap = ctx.getImageData(0, 0, iDstW, iDstH);

for (var y = 0; y < iDstH; y++) {

for (var x = 0; x < iDstW; x++) {

var t = mathTwirl(x, y);

aMap[(x + y * iDstH) * 2 + 0] = Math.max(Math.min(t.x, iDstW - 1), 0);

aMap[(x + y * iDstH) * 2 + 1] = Math.max(Math.min(t.y, iDstH - 1), 0);

aMapT[(x + y * iDstH)] = t.t;

}

// Обновляем сцену

updateScene();

};

function updateScene() {

// Обновляем последние координаты

iLastX = iLastX + iXSpeed;

iLastY = iLastY + iYSpeed;

// Реверс скорости

if (iLastX + 1 > ctx.canvas.width - iDstW/2) {

iXSpeed = -4;

}

if (iLastX - 1 < iDstW/2) {

iXSpeed = 4;

}

if (iLastY + 1 > ctx.canvas.height - iDstH/2) {

iYSpeed = -3;

}

if (iLastY - 1 < iDstH/2) {

iYSpeed = 3;

}

// Сдвигаем второй объект

canvasObj.style.left = iLastX - Math.floor(iDstW / 2) + 'px';

canvasObj.style.top = iLastY - (Math.floor(iDstH / 2)) + 'px';

// Выводим искажающую сферу

var aData = ctx.getImageData(iLastX - Math.ceil(iDstW / 2), iLastY - Math.ceil(iDstH / 2), iDstW, iDstH + 1);

for (var j = 0; j < iDstH; j++) {

for (var i = 0; i < iDstW; i++) {

var u = aMap[(i + j * iDstH) * 2];

var v = aMap[(i + j * iDstH) * 2 + 1];

var t = aMapT[(i + j * iDstH)];

var x = Math.floor(u);

var y = Math.floor(v);

var kx = u - x;

var ky = v - y;

for (var c = 0; c < 3; c++) {

aBitmap.data[(i + j * iDstH) * 4 + c] =

(aData.data[(x + y * iDstH) * 4 + c] * (1 - kx) + aData.data[((x + 1) + y * iDstH) * 4 + c] * kx) * (1-ky) * t +

(aData.data[(x + (y + 1) * iDstH) * 4 + c] * (1 - kx) + aData.data[((x + 1) + (y + 1) * iDstH) * 4 + c] * kx) * (ky) * t;

}

ctxObj.putImageData(aBitmap,0,0);

// Обновляем таймер

setTimeout(updateScene, 16);

}

};

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

Эффект искажающей линзы с помощью HTML5

Читайте также:

Последние новости

Гайд по Bootstrap Carousel: Примеры и уроки

18 сайтов, чтобы найти лучшие бесплатные фото

Новинки для Gutenberg: 10 шаблонов для сайта

Топ-10 Elementor шаблонов, тем и плагинов осени

Бесплатные генераторы для веб-дизайнеров

Примеры и руководство по Bootstrap Grid System

Не пропусти