Рисование дуги в Canvas

Дуга создается с использованием методов arc() и arcTo()

Рисование с помощью метода arc()

Метод arc() используется для создания дуги или круга на холсте. Он задает дугу с центром в точке (x, y), указанным радиусом, начальным и конечным углом в радианах и направлением (по или против часовой стрелки).

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

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

// Рисуем дугу (круг) с центром в точке (100, 100) и радиусом 50
ctx.arc(100, 100, 50, 0, Math.PI * 2);

// Закрываем путь (для круга это не обязательно)
// ctx.closePath();

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

Результат:

Рисование с помощью метода arcTo()

Метод arcTo() используется для добавления дуги к текущему пути, соединяющей текущую точку с точкой (x2, y2) с радиусом radius, и предыдущей линией с точки (x1, y1). Это позволяет создавать более плавные углы между линиями, чем просто использование метода lineTo().

Пример:

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

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

// Рисуем прямую линию до точки (100, 20)
ctx.lineTo(100, 20);

// Добавляем дугу, соединяющую текущую линию и предыдущую, с радиусом 30
ctx.arcTo(150, 20, 150, 70, 30);

// Рисуем прямую линию до точки (150, 120)
ctx.lineTo(150, 120);

// Закрываем путь
ctx.closePath();

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

Результат: