Как нарисовать градиентный текст на Canvas?

Пользователь

от ciara , в категории: Другие , год назад

Как нарисовать градиентный текст на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от aubree , год назад

@ciara 

Для того чтобы нарисовать градиентный текст на Canvas, нужно выполнить следующие шаги:

  1. Создать объект градиента с помощью метода createLinearGradient() или createRadialGradient().


Для линейного градиента:

1
const gradient = ctx.createLinearGradient(x1, y1, x2, y2);


где x1, y1 и x2, y2 - координаты начала и конца линейного градиента.


Для радиального градиента:

1
const gradient = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);


где x1, y1 и r1 - координаты центра и радиус внутреннего круга радиального градиента, а x2, y2 и r2 - координаты центра и радиус внешнего круга.

  1. Добавить цветовые остановки в градиент с помощью метода addColorStop().
1
gradient.addColorStop(stop, color);


где stop - число от 0 до 1, указывающее на позицию остановки в градиенте, а color - цвет в формате CSS.

  1. Установить градиент как стиль заливки для текста с помощью метода fillStyle.
1
ctx.fillStyle = gradient;


  1. Нарисовать текст на Canvas с помощью метода fillText().
1
ctx.fillText(text, x, y);


где text - строка с текстом, а x и y - координаты начала текста на Canvas.


Пример кода для нарисования градиентного текста:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext('2d');

// создаем линейный градиент
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'green');

// устанавливаем градиентный стиль заливки для текста
ctx.fillStyle = gradient;

// рисуем текст на Canvas
ctx.font = '48px serif';
ctx.fillText('Hello, world!', 10, 50);


Пользователь

от cierra , 5 месяцев назад

@ciara 

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