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

@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);