Risanje krogov preko canvas v JavaScript

Naslednja metoda arc riše lok s središčem na določeni točki. Sprejme naslednje parametre: x, y, polmer r, začetni kot startAngle, končni kot endAngle, risanje v smeri urinega kazalca ali obratno direction.

Parameter direction sprejme naslednje vrednosti: true povzroči risanje v smeri urinega kazalca, false v nasprotni smeri (privzeto).

Koti v metodi arc so merjeni v radianih, ne v stopinjah. Za pretvorbo stopinj v radiane lahko uporabite naslednjo funkcijo:

javascriptfunction getRadians(degrees) {
  return (Math.PI / 180) * degrees;
}

Narišimo krog

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();

Результат:

Narišimo polovico kroga

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();

Результат:

Narišimo polovico kroga (zapolnjeno)

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill(); // zapolnimo konturo

Результат:

Praktične naloge