Зображення з перешкодами за допомогою HTML5 Canvas

19

Від автора: вже протягом деякого часу я вивчаю, як можна створити зображення з перешкодами за допомогою веб-технологій html5. В canvas API можна змінювати растрові зображення в пікселях, але вчора я усвідомив, що з допомогою досить простої функції API можна створювати зображення з ефектом графічного сміття.

Перенесення зображень в Canvas

Почнемо ми з тега canvas, як показано в CodePen демо:

Зверніть увагу, що початкові розміри тега довільні. Вони будуть змінюватися за допомогою JavaScript. Код CSS:

body {
background: #000;
}
canvas {
display: block;
margin: 0 auto;
width: 60%;
}

JS код для малювання в canvas ділиться на два спільні кроки. Першим ділом ми завантажуємо відповідне растрове зображення:

var img = new Image();
img.src = «nastya.jpg»;
img.onload = function() {
draw(this);
};

Після повного завантаження зображення ми промальовуємо його на полотно за допомогою функції draw. Спочатку ми перевіряємо, щоб розмір полотна збігався з розміром завантажуваного зображення:

function draw(img) {
var portrait = document.getElementById(«portrait»);
var canvas = portrait.getContext(«2d»);
portrait.setAttribute(«width», img.width);
portrait.setAttribute(«height», img.height);

}

Якщо все нормально, зображення ляже на canvas один до одного. Тобто висота і ширина зображення заповнять таку ж за розміром область на полотні, починаючи від лівого верхнього кута (0, 0) до нижнього правого. Синтаксис буде виглядати приблизно так:

canvas.drawImage(img, 0, 0, img.width, img.height,
0, 0, portrait.width, porttrait.height);

Пікселі зображення лягають на полотно один до одного, однак застосований CSS код зробить так, що canvas і зображення будуть адаптивно підлаштовуватися під висоту і ширину вікна браузера.

Тим не менш, ніде не сказано, що треба брати всі зображення і переносити його на полотно цілком відразу. Ми можемо нарізати зображення на смужки і викладати їх на canvas зі зміщеним горизонтальним значенням. Для цього нам знадобиться дві змінні: кількість смужок і максимальне горизонтальне зміщення. Код нижче – продовження функції draw:

var verticalSlices = Math.round(img.height / 20);
var maxHorizOffset = 20;

Смужки відмальовує всередині циклу for:

for (var i = 0; i < verticalSlices; i++) {
var horizOffset = getRandom(-Math.abs(maxHorizOffset), maxHorizOffset);
canvas.drawImage(img,
0,
i * verticalSlices,
img.width,
i * verticalSlices + verticalSlices,
horizOffset, i * verticalSlices,
img.width,
i * verticalSlices + verticalSlices);
}

Змінна horizOffset викликає іншу функцію для обчислення випадкового значення в межах двох чисел. Зауважте, що виклик функції може повернути від’ємне значення, що зрушить смужки зображення вліво:

function getRandom(min, max) {
return Math.floor(Math.random() * (max — min + 1)) + min;
}

Ця функція створює ефект випадкових графічних перешкод, які ви можете спостерігати на початку статті.

Висновок

Різні варіації цієї техніки можна використовувати динамічно: наприклад, можна накласти на canvas два потоку HTML5 відео і зробити порівняння «до-після».

За іронією долі, велика частина ефектів запозичена з аналогових технологій типу втрати сигналу на старих телевізорах, але переведена в цифру. У наступних статтях я покажу ще більше схожих ефектів, які виконані за допомогою веб-технологій.