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

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

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

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

<div>
    <canvas id="slideshow" width="924" height="530"></canvas>
    <canvas id="obj" width="256" height="256"></canvas>
</div>

<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;
}

.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 обновляет координаты объекта сферы и выводит ее во втором контексте.

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);
    }
};

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);

}

};

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

Интересно:

Опубликовал admin 01.05.2012 в 14:33, в категории Веб-дизайн. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.

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

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

Интересно:

Не пропусти

Опрос блога

Подписывайтесь

Популярные статьи

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

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

Интересно:

Зайти

Не пропусти

Опрос блога

Подписывайтесь

Популярные статьи