[Canvas + JS] Волна из текста : часть 2 + исходники | Wavy text : part 2 + sources
![ThreePixDroid [RU]](http://yt3.ggpht.com/ytc/AIdro_m9hY0wSlD4ygQJ9MwISJSheP6X-5dtaCYYZ-hmk6ytX8k=s48-c-k-c0x00ffffff-no-rj)
HTML-код
- Опубликовано: 25 авг 2024
- #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/Thr...
VK threepi...
Исходники второй части:
CodePen: codepen.io/Thr...
VK: threepi...
![[Canvas JS] Волна из текста : часть 1 + исходники | Wavy text : part 1 + sources](http://i.ytimg.com/vi/JqZV_wXDy2w/mqdefault.jpg)
![[Canvas JS] Волна из текста : часть 1 + исходники | Wavy text : part 1 + sources](/img/tr.png)
![[HTML5 CSS] Animated gradient text + Исходники](http://i.ytimg.com/vi/IWFNsqNsJ1Q/mqdefault.jpg)
если бы я могла, я бы поставила больше, чем один лайк. Спасибо, видео просто невероятное!
Спасибо)
Очень классные видео-ролики, спасибо огромное, с наступающим =)
Спасибо, тебя тоже с наступающим!)
Теперь я знаю, что у тебя темная тема в google, это четко! У меня тоже темная
Офигенно! Я бы кстати не до думался использовать полоску из отдельных прямоугольников. Скорее всего стал рисовать бы градиент, который довольно не удобный. Очень круто!
Ну полоска здесь была, чисто для того что бы показать манипуляцию с пикселями...)
я не смотрел, но просто подпишусь и поставлю лайк, потому что материал отличный!!!!!!
Классно, Спасибо!)
Этот чел очень любит канвас)
Как всегда пушка
Спасибо)
Крутые видосы!
Спасибо большое)
А много попадалось коммерческих проектов, где пригождались все эти эксперименты с канвасом и графикой? Потому что я уже три года работаю фронтом, и мне попадались такие проекты буквально полтора раза ))) Редкое удовольствие посидеть, порисовать то, что описано словами в ТЗ или нарисовано в статике дизайнером ((( Полтора раза, потому что первый еще более менее покатит, как работа с канвасом, а второе - ну так, с натяжечкой. Если интересно - вот ссылка на черновик для первого случая ( pavelarseyev.github.io/canvas-text-dropIn/index.html ). Задача - сделать, чтобы текст "выпадал" построчно, но чтобы это было адаптивно (т.е. я заранее не знаю, какой именно текст будет, во сколько строк он влезет и на каком экране его откроют). Налету разбиваю текст на куски, рисую кучу канвасов с этим текстом построчно и показываю по скроллу. При этом текст по прежнему можно выделять мышью и он продолжает считаться частью контента. Живой проект не покажу...он под NDA еще года три )
Да я в принципе не занимаюсь коммерческими проектами) Это чисто хобби. Многие думают, эффекты из моих видео нужно применять к сайтам, но фактически канал нацелен на разработку игр, в играх как правило много работы с графикой, конечно это не отменяет того, что эффекты всё таки можно разместить на сайте и в видео я иногда об этом говорю, но всё же считаю что это лишняя нагрузка на страничку особенно если анимация на весь экран и параллельно ещё куча всяких "плюшек" на сайте. "Тогда почему уроки на JavaScript?" Всё просто, JavaScrip очень легко понять(в плане синтаксиса), для работы с ним почти ничего не надо кроме текстового редактора, а алгоритм легко перенести на большинство популярных языков, например в C# и Java есть аналои Canvas, да и синтаксис похож.
Будет что-то на webgl? Спасибо за ролик, будем смотреть.
Да webGl будет, но очень очень не скоро, если только планы резко не поменяются. Спасибо)
Блин, почему ютуб не скидывает уведомления с твоего канала? Вот собака. Видео оказывается уже несколько дней назад вышло, а я пропустил(((
Да и картинки у 2 ух частей похожи) фиг разберёшь если заголовок не прочитать)
Привет! Сможешь сделать бегущую строку с текстом в форме волны? Контур в форме волны, и по контуру передвигается текст , зацикленно. Похоже на бегущую строку только текст бежит в форме волны🙏🙏🙏
Дроид, скажи, а чьи видео ты сам смотришь? Какие каналы мог бы посоветовать?
Привет) Да я и не смотрю конкретные каналы какие то - одно видео там, пара тут) Самые хорошие наверное franks laboratory и coding math... вроде бы всё, но у них я тоже не все видео посмотрел. Franks laboratory - смотрю только видео похожие на мои проекты, те что у меня на ПК есть, и сравниваю код)
Coding math - название говорит само за себя)
@@ThreePixDroid_RU Фрэнка я уже посмотрела, Coding math добавила. Спасибо!
Я бы хотела посоветовать этот плейлист: ruclips.net/video/dXhAQbE8iBg/видео.html
Этот разработчик топ из гугла, он делает потрясающие вещи, у него чистый и лаконичный код. Надеюсь, он тебе поможет прокачаться ещё больше и набраться вдохновения
@D Vladyko Спасибо, посмотрю) Но похоже придётся смотреть только код) Так как 11 видео из 15. очень похожи на те что у меня уже есть в реализованном виде, но пока не записаны. Может, придётся код переписать, надеюсь у меня не так всё плохо!)
Я сейчас понял, что мне стоит добавить на канале видео без разъяснений! Просто код под музыку.
Да, думаю можно даже делать клоны своих же видео, только с другой реализацией! Например более упрощённую версию, а то я люблю усложнить. То есть будет 2 версии одного и того же эффекта с разной реализацией!