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

#getImageData #putImageData #measureText Во второй части видео раскрасим ранее созданный эффект волны из текст. Часть 1: https://youtu.be/JqZV_wXDy2w К концу видео у вас будет код в котором можно будет легко контролировать такие параметры как: высоту волны, скорость волны, количество фрагментов текста, скорость перемещения текста, а так же наложить любое изображение на текст в качестве текстуры, двумя разными способами, кроме того текст будет автоматически подстраиваться под ширину 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: 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