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

#getImageData #putImageData #measureText
Во второй части видео раскрасим ранее созданный эффект волны из текст.
Часть 1: • [Canvas JS] Волна из ...
К концу видео у вас будет код в котором можно будет легко контролировать такие параметры как: высоту волны, скорость волны, количество фрагментов текста, скорость перемещения текста, а так же наложить любое изображение на текст в качестве текстуры, двумя разными способами, кроме того текст будет автоматически подстраиваться под ширину Canvas.
Для себя вы получите базовые навыки пиксельной манипуляции и узнаете о таких метода как: getImageData, putImageData, measureText, toDataURL, drawImage..
Код можно развивать для получения куда более интересных эффектов и в этом видео вы найдёте почти всю необходимую информацию для этого.
Тайм-код :
00:15 Меняем шрифт и внешний вид текста
00:50 Начинаем делать текст цветным (способ 1)
01:00 Рисуем цветную линию без использования градиента
05:00 Манипуляция пикселями (меняем цвета пикселей текста)
11:50 Работа с градиентом (делаем текст цветным 2)
14:00 Превращаем холст в изображение toDataURL
15:00 Рисуем изображение методом drawImage
17:20 Цветной текст (способ 3)
17:50 Работа с изображением (Накладываем картинку на текст)
21:00 Подключаем картинку из интернета
21:30 Делаем Холст адаптивным
22:20 Делаем Текст адаптивным
24:50 Играемся с настройками текста
Исходники первой части:
CodePen: codepen.io/ThreePixDroid/pen/...
VK threepixdroid?w=wall-9...
Исходники второй части:
CodePen: codepen.io/ThreePixDroid/pen/...
VK: threepixdroid?w=wall-9...

[@dvladyko8258]

если бы я могла, я бы поставила больше, чем один лайк. Спасибо, видео просто невероятное!

[@clown3273]

я не смотрел, но просто подпишусь и поставлю лайк, потому что материал отличный!!!!!!

[@neonbrickchannel2136]

Теперь я знаю, что у тебя темная тема в google, это четко! У меня тоже темная

[@zoodogood]

Очень классные видео-ролики, спасибо огромное, с наступающим =)

[@neonbrickchannel2136]

Офигенно! Я бы кстати не до думался использовать полоску из отдельных прямоугольников. Скорее всего стал рисовать бы градиент, который довольно не удобный. Очень круто!

[@user-sg7pd6rj7q]

Этот чел очень любит канвас)

[@MathLector]

Крутые видосы!

[@BigDaddy-zp6hz]

Как всегда пушка

[@pavelarseyev452]

А много попадалось коммерческих проектов, где пригождались все эти эксперименты с канвасом и графикой? Потому что я уже три года работаю фронтом, и мне попадались такие проекты буквально полтора раза ))) Редкое удовольствие посидеть, порисовать то, что описано словами в ТЗ или нарисовано в статике дизайнером ((( Полтора раза, потому что первый еще более менее покатит, как работа с канвасом, а второе - ну так, с натяжечкой. Если интересно - вот ссылка на черновик для первого случая (

[@Trendy_Candy]

Привет! Сможешь сделать бегущую строку с текстом в форме волны? Контур в форме волны, и по контуру передвигается текст , зацикленно. Похоже на бегущую строку только текст бежит в форме волны🙏🙏🙏

[@neonbrickchannel2136]

Блин, почему ютуб не скидывает уведомления с твоего канала? Вот собака. Видео оказывается уже несколько дней назад вышло, а я пропустил(((

[@whatthepeople]

Будет что-то на webgl? Спасибо за ролик, будем смотреть.

[@dvladyko8258]

Дроид, скажи, а чьи видео ты сам смотришь? Какие каналы мог бы посоветовать?