Как в Canvas API реализовать плавный градиент для узлов дерева, используя массив цветов RGBA и метод addColorStop?

Для реализации плавного градиента на узлах дерева в Canvas API необходимо использовать объект CanvasGradient, создаваемый методами createLinearGradient или createRadialGradient, а также метод addColorStop для задания точек перехода цветов.

**Шаг 1. Подготовка холста и контекста**

Получите контекст 2D-рисования:
js
const canvas = document.getElementById(‘myCanvas’);
const ctx = canvas.getContext(‘2d’);

**Шаг 2. Определение массива цветов RGBA**

Создайте массив, где каждый элемент содержит позицию (от 0 до 1) и цвет в формате rgba:
js
const colorStops = [
{ offset: 0, color: ‘rgba(255, 100, 50, 1)’ },
{ offset: 0.5, color: ‘rgba(100, 200, 80, 0.8)’ },
{ offset: 1, color: ‘rgba(50, 100, 255, 1)’ }
];

**Шаг 3. Функция рисования узла с градиентом**

Создайте универсальную функцию, принимающую координаты и размер узла:
js
function drawNode(ctx, x, y, radius, colorStops) {
// Создаём радиальный градиент для круглого узла
const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);

// Добавляем точки цвета из массива
colorStops.forEach(stop => {
gradient.addColorStop(stop.offset, stop.color);
});

ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = gradient;
ctx.fill();
ctx.closePath();
}

**Шаг 4. Рисование дерева с узлами**

Определите структуру дерева и рекурсивно рисуйте узлы:
js
const treeNodes = [
{ x: 400, y: 50, radius: 30 },
{ x: 200, y: 150, radius: 25 },
{ x: 600, y: 150, radius: 25 },
{ x: 100, y: 270, radius: 20 },
{ x: 300, y: 270, radius: 20 },
];

treeNodes.forEach(node => {
drawNode(ctx, node.x, node.y, node.radius, colorStops);
});

**Шаг 5. Линейный градиент для рёбер дерева**

Для соединительных линий можно применить createLinearGradient:
js
function drawEdge(ctx, x1, y1, x2, y2) {
const grad = ctx.createLinearGradient(x1, y1, x2, y2);
grad.addColorStop(0, ‘rgba(255, 100, 50, 0.9)’);
grad.addColorStop(1, ‘rgba(50, 100, 255, 0.9)’);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = grad;
ctx.lineWidth = 3;
ctx.stroke();
}

**Ключевые особенности метода addColorStop:**
— Первый аргумент — позиция от 0.0 (начало) до 1.0 (конец).
— Второй аргумент — любой допустимый CSS-цвет, включая rgba для управления прозрачностью.
— Можно добавлять неограниченное количество точек для сложных переходов.
— Порядок вызовов addColorStop не важен — браузер сортирует их по offset автоматически.

Таким образом, вынося массив colorStops в отдельную конфигурацию, вы получаете гибкую и переиспользуемую систему стилизации узлов дерева.