Цртање кругови преку canvas во JavaScript
Следниот метод arc црта лак со
центар во одредена точка. Ги прифаќа следните
параметри: x, y, радиус r,
почетен агол startAngle, краен
агол endAngle, цртање во или спротивно на насоката на
стрелките на часовникот direction.
Параметарот direction ги зема следните вредности: true го наметнува
цртањето во насока на стрелките на часовникот, false спротивно од стрелките на часовникот (по default).
Притоа аглите во методот 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(); // ќе го исполниме контурот
:
