Метод 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,
который рисует прямоугольник