Metóda arc

Metóda arc kreslí oblúk so stredom v zadanom bode, zadaným polomerom. Viditeľným sa tento oblúk stane až po aplikovaní metód stroke alebo fill. V prvom prípade to bude obrys, v druhom - vyplnený tvar.

Posledný voliteľný parameter reguluje smer kreslenia. Prijíma hodnotu true alebo false. Hodnota true kreslí oblúk v smere hodinových ručičiek, zatiaľ čo hodnota false - proti smeru hodinových ručičiek (predvolené).

Pri kreslení je možné zadať počiatočný a koncový uhol. Tieto uhly sa merajú v radiánoch, nie v stupňoch. Na prevod stupňov na radiány môžete použiť nasledujúcu funkciu:

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

Syntax

javascriptkontext.arc(x, y, polomer, počiatočný uhol, koncový uhol, [smer = false]);

Príklad

Nakreslime kružnicu:

html<canvas id="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();

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

Результат:

Príklad

Nakreslime polovicu kružnice:

html<canvas id="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();

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

Результат:

Príklad

Nakreslime polovicu kruhu (vyplníme obrys pomocou fill):

html<canvas id="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();

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

Результат:

Pozri tiež