Перейти к содержанию

arc()

Метод arc() создает дугу/кривую (используется для создания окружностей или их части).

Примечание: Чтобы создать круг при помощи метода arc(), нужно установить начальный угол в 0, а конечный угол в 2*Math.PI. Затем при помощи метода stroke() или fill() в действительности нарисовать дугу в элементе <canvas>.

Дуга

Центр: arc(100,75,50,0*Math.PI,1.5*Math.PI)

Начальный угол: arc(100,75,50,0,1.5*Math.PI)

Конечный угол: arc(100,75,50,0*Math.PI,1.5*Math.PI)

Синтаксис

context.arc(x, y, r, sAngle, eAngle, counterclockwise);

Параметры

x
Координата X центра круга
y
Координата Y центра круга
r
Радиус круга
sAngle
Начальный угол в радианах (0 — позиция на 3 часа)
eAngle
Конечный угол в радианах
counterclockwise
Необязательный параметр. Определяет, как рисовать окружность, по часовой стрелке или против часовой стрелки. По умолчанию установлено значение false, что означает по часовой стрелке. Значение true указывает направление против часовой стрелки.

Спецификация

Пример

Создаем круг:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:

var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')
ctx.beginPath()
ctx.arc(100, 75, 50, 0, 2 * Math.PI)
ctx.stroke()

Ссылки