[Canvas JS] Волна из текста : часть 1 + исходники | Wavy text : part 1 + sources

Описание

#getImageData #putImageData #measureText

В первой части видео создадим довольно популярный эффект - волну из текст.
К концу видео у вас будет код в котором можно будет легко контролировать такие параметры как: высоту волны, скорость волны, количество фрагментов текста, скорость перемещения текста..

Код можно развивать для получения куда более интересных эффектов...
и в этом видео вы найдёте почти всю необходимую информацию для этого.

Тайм-код :
00:00 Заставка и описание проекта
01:10 Пошаговый план и базовые настройки
02:20 Объявляем 2 класса: Animation и Canvas
03:40 Создаём и настраиваем холст
07:20 Подключаем контекст и рисуем текст
10:30 Получаем данные изображения getImageData
12:10 Помещаем данные изображения на холст putImageData
14:00 Узнаём ширину текста используя measureText
18:20 Нарезаем текст на части
24:00 Делаем волну из фрагментов текста используя Math.sin
31:50 Анимируем волну с помощью Date().getMilliseconds и requestAnimationFrame
35:30 Добавляем эффект бесконечной бегущей строки
40:20 Заключение и финальные слова

Вторая часть: https://youtu.be/Md0DQltTx8o

Исходники первой части:
CodePen: https://codepen.io/ThreePixDroid/pen/QWKMBRW
VK https://vk.com/threepixdroid?w=wall-97964493_94

Исходники второй части:
CodePen: https://codepen.io/ThreePixDroid/pen/RwGxbEN
VK: https://vk.com/threepixdroid?w=wall-97964493_97