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