Skip to content

Latest commit

 

History

History
138 lines (111 loc) · 7.89 KB

canvas-draw-arc.md

File metadata and controls

138 lines (111 loc) · 7.89 KB
Raw
title layout categories pubDate description keywords
Рисование дуги в Canvas
../../layouts/ArticleEntry.astro
javascript
canvas
2024-02-26
Рисование дуги в Canvas
javascript, canvas

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

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

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

x Координата X центра дуги.
y Координата Y центра дуги.
radius Радиус дуги.
startAngle Начальный угол в радианах, с которого начинается дуга (0 - находится на правой горизонтальной оси).
endAngle Конечный угол в радианах, на котором заканчивается дуга.
anticlockwise Направление дуги (против часовой стрелки - true, по часовой - false).

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

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

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

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

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

Результат:

<iframe allowfullscreen="true" height="500" scrolling="no" src="https://codepen.io/Awilum/embed/xxBaObj?default-tab=result" width="100%"></iframe>

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

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

x1, y1 Координаты начальной точки предыдущей линии.
x2, y2 Координаты конечной точки текущей линии.
radius Радиус дуги.

Пример:

// Начинаем новый путь
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();

Результат:

<iframe allowfullscreen="true" height="500" scrolling="no" src="https://codepen.io/Awilum/embed/abMaZOY?default-tab=result" width="100%"></iframe>