Разукрасьте свое имя огоньками при помощи HTML5 Canvas и режимов наложения в CSS

Дата публикации: 2016-10-06

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

Создаем область под текст

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

<div id="allofthelights">
    <canvas width="800" height="350"></canvas>
    <h1 contenteditable="true">Liza</h1>
</div>

</div>

Тег canvas и текст закрепляются в одном месте при помощи position: absolute:

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

#allofthelights {

position: relative;

overflow: hidden;

}

#allofthelights canvas, #allofthelights h1 {

width: 100%;

position: absolute;

top: 0;

}

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

#allofthelights canvas {
    background: #e97f7b;
}

#allofthelights canvas {

background: #e97f7b;

}

Заголовок h1 задан в единицах измерения vw, чтобы подстраиваться под размер страницы:

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

#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";

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

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

#allofthelights h1 {

background: #fff;

mix-blend-mode: lighten;

}

Почему CSS?

Разумно спросить, а почему нужно использовать HTML и режимы наложения CSS, когда можно воспользоваться режимами наложения, кадрированием путей и поддержкой текста в Canvas API? Было несколько причин:

Текст в canvas отрисовывается как пиксель. Его нельзя считать, выделить или найти. Если вы хотите создать такой же текст с доступностью в canvas, вам придется писать текст в теге canvas:

<canvas width="800" height="350">Liza</canvas>

1	<canvas width="800" height="350">Liza</canvas>

В canvas нет концепции центрирования текста. Мне пришлось считывать размер текста в JS и подстраивать его на холсте для имитации эффекта центрирования.

Это не означает, что метод на чистом canvas неправильный. В некоторых случаях он подходит намного лучше. Просто у нас не тот случай.