Караоке на HTML5 canvas



Вирішив я спробувати зробити web-караоке, але щоб текст красиво відображався — не по-буквено, а плавно. Рішення виявилося простішим, ніж я думав.

По-буквений варіант зовсім простий — достатньо обійтися CSS, див. приклад на JSFiddle.

Більш красивий варіант полягає у використанні canvas і кольору тексту за допомогою стилю gradient:
var gradient = ctx.createLinearGradient(0, 0, 30, 0);
gradient.addColorStop(0.00, 'yellow');
gradient.addColorStop(0.01, 'black');
gradient.addColorStop(1.00, 'black');
ctx.fillStyle = gradient;

Градієнт сам по собі (у вигляді переходу одного кольору в іншій — див. нижче малюнок зліва) для відображення караоке не потрібен, тому використовується додаткова точка — 0.01, щоб основна частина «градієнта» (0.01-1.00) залишалася чорної, а маленька частина (0.00-1.00) — жовтою (див. нижче малюнок праворуч):

(альтернативний варіант — поставити мале значення третього параметра — x1 (закінчення градієнта) — в createLinearGradient).

Однак, якщо просто намалювати текст:
ctx.fillText(text, 0, 0);

то він буде відображений лише одним кольором — чорним:


Справа в тому, що градієнт застосовується відносно початку системи координат. На малюнку вище точка 0 по осі x відображається чорної вертикальної лінією (зміщена щодо осі х в середину canvas'a за допомогою методу translate). Щоб застосувати градієнт, досить намалювати текст зі зміщенням. Та частина, яка виявиться ліворуч від початку координат по осі x, буде пофарбована в жовтий колір, а та, що праворуч — в чорний:
ctx.fillText(text, -190, 0);



Для відображення караоке тепер достатньо лише зміщувати початок системи координат по осі x (наприклад, у циклі, на один піксел) — текст буде поступово забарвлюватися в жовтий колір. Спробувати розмальовку тексту зі зміщенням положення тексту (без зміщення початку координат) можна спробувати на JSFiddle (сітка і дизайн взяті з цієї статті).

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.