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