Рисование окружностей через 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(); // закрасим контур

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

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

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

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

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