Рисование контуров в Canvas

Рисование контуров, также известное как работа с путями (path), представляет собой способ создания сложных форм и фигур на холсте. Работа с путями позволяет создавать кривые, ломаные линии, а также комбинировать различные фигуры в одном элементе. В основе работы с путями лежит использование методов для создания пути, а затем применение методов для его рисования и/или заливки.

Создание фигур с использованием контуров включает в себя несколько важных шагов:

1. Начинается с создания контура.
2. Затем, с помощью команд рисования, контур рисуется.
3. После этого контур закрывается.
4. Созданный контур можно обвести или заполнить для его отображения.

Ниже приведены некоторые методы, которые могут быть использованы на каждом из описанных шагов.

Создание пути:

Рисование пути:

Пример (рисование треугольника):

// Начинаем новый путь
ctx.beginPath();

// Перемещаем "курсор" в точку (50, 50)
ctx.moveTo(50, 50);

// Добавляем линии до двух других точек, чтобы создать треугольник
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);

// Закрываем путь, соединяя последнюю точку с первой
ctx.closePath();

// Рисуем контур пути
ctx.strokeStyle = 'blue'; // Цвет контура
ctx.lineWidth = 2; // Толщина линии
ctx.stroke();

Результат: