Цртање кругова преко 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(); // зафарбамо контур
:
