Прикрасьте своє імя вогниками за допомогою HTML5 Canvas і режимів накладання в CSS

15

Від автора: старі вивіски з Лас-Вегаса 1950-х років спонукали мене створити схожий виблискуючий ефект для тексту. Наше демо візьме частину коду з моєї статті по ТБ шуму.

Створюємо область під текст

Розмітка складається з тега canvas, тексту заголовка і контейнера div. Заголовок h1 має атрибут contentEditable, тобто текст можна редагувати:

Liza

Тег canvas і текст закріплюються в одному місці за допомогою position: absolute:

#allofthelights {
position: relative;
overflow: hidden;
}
#allofthelights canvas, #allofthelights h1 {
width: 100%;
position: absolute;
top: 0;
}

Щоб заощадити на часі відтворення, тегу canvas присвоєно початковий стан off для підсвічування. Тобто там не буде світла, замість нього буде отрисовываться певний колір.

#allofthelights canvas {
background: #e97f7b;
}

Заголовок h1 вказано в одиницях виміру vw, щоб підлаштовуватися під розмір сторінки:

#allofthelights h1 {
font-size: 10vw;
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 2rem;
}

Блиск

Скрипт в кінці сторінки насамперед визначає елемент і встановлює розмір комірки світла, а також її колір:

var nameLights = document.querySelector(«#allofthelights canvas»),
context = nameLights.getContext(«2d»),
lightSize = 6;
context.fillStyle = «#fbe1ca»;

Основна функція:

function drawLights() {
context.clearRect(0, 0, nameLights.width, nameLights.height);
for (var v=60; v < nameLights.height — 30; v += lightSize){
for (var h=0; h < nameLights.width; h += lightSize){
if (Math.random()<.5) {
context.fillRect(h + 1,v + 1, lightSize -1, lightSize — 1);
}
}
}
requestAnimationFrame(drawLights);
}
drawLights();

По порядку, функція:

очищає полотно, видаляючи попередню картинку;

розмальовує 60 пікселів від верхнього краю полотна, заощаджуючи час візуалізації (відображення закінчиться за 30 пікселів від нижньої межі полотна);

малює світлові клітинки по горизонталі;

виробляє випадкові обчислення, щоб зрозуміти, чи потрібно малювати клітинку світла в поточній позиції або ні;

якщо обчислення потрапили в область заголовка, малюється квадрат на 2 пікселя менше комірки світла, щоб створити видимий шаблон сітки.

Бродвей

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

#allofthelights h1 {
background: #fff;
mix-blend-mode: lighten;
}

Чому CSS?

Розумно запитати, а чому потрібно використовувати HTML і режими накладення CSS, коли можна скористатися режимами накладення, кадруванням шляхів і підтримкою тексту в Canvas API? Було кілька причин:

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

Liza

В canvas немає концепції центрування тексту. Мені довелося читати розмір тексту JS і підлаштовувати його на полотні для імітації ефекту центрування.

Це не означає, що метод на чистому canvas неправильний. В деяких випадках він підходить набагато краще. Просто у нас не той випадок.

Щось менш помітне

Зменшити яскравість тексту можна кількома способами:

можна знизити ймовірність заповнення комірки кольором, зменшивши значення в Math.random();

можна було працювати з «перехідними» квітами, між фоном і кольором клітинки, що створює ефект уповільнення анімації;

для ще більшого уповільнення анімації можна було скористатися функціями setTimeOut або setInterval.