# Метод arc

Метод `arc` рисует дугу с центром в заданной точке, заданным радиусом. Видимой эта дуга станет, только если применить методы `stroke` или `fill`. В первом случае будет контур, а во втором - фигура.

Последний необязательный параметр регулирует направление рисования. Он принимает значение `true` или `false`. Значение `true` рисует дугу по часовой стрелке, а значение `false` - против часовой (по умолчанию).

Можно задать начальный и конечный углы при рисовании. Эти углы измеряются в радианах, не в градусах. Для перевода градусов в радианы вы можете использовать следующую функцию:

`function getRadians(degrees) { return (Math.PI / 180) * degrees; }`

## Синтаксис

`контекст.arc(x, y, радиус, начальный угол, конечный угол, [направление = false]);`

## Пример

Давайте нарисуем окружность:

`<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); ctx.arc(100, 100, 75, 0, getRadians(360)); ctx.stroke(); function getRadians(degrees) { return (Math.PI / 180) * degrees; }`

:

## Пример

Давайте нарисуем половинку окружности:

`<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); ctx.arc(100, 100, 75, 0, getRadians(180)); ctx.stroke(); function getRadians(degrees) { return (Math.PI / 180) * degrees; }`

:

## Пример

Давайте нарисуем половинку круга (закрасим контур с помощью `fill`):

`<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); ctx.arc(100, 100, 75, 0, getRadians(180)); ctx.fill(); function getRadians(degrees) { return (Math.PI / 180) * degrees; }`

:

## Смотрите также

- метод `rect`,
  который рисует прямоугольник

← →
↑
en ru