# Рисование окружностей через canvas на JavaScript

Следующий метод `arc` рисует дугу с центром в некоторой точке. Он принимает следующие параметры: `x`, `y`, радиус `r`, начальный угол `startAngle`, конечный угол `endAngle`, рисовать по или против часовой стрелки `direction`.

Параметр `direction` принимает следующие значения: `true` заставляет рисовать по часовой стрелке, `false` против часовой (по умолчанию).

При этом углы в методе `arc` измеряют в радианах, не в градусах. Для перевода градусов в радианы вы можете использовать следующую функцию:

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

## Нарисуем окружность

`<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();`

:

## Нарисуем половинку окружности

`<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();`

:

## Нарисуем половинку круга

`<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(); // закрасим контур`

:

## Практические задачи

← →
↑
en ru