Meetod arc

Meetod arc joonistab kaare, mille keskpunkt on etteantud punktis ja raadius on etteantud. See kaar muutub nähtavaks ainult siis, kui rakendada meetodeid stroke või fill. Esimesel juhul saab kontuuri, teisel juhul - kujundi.

Viimane valikuline parameeter reguleerib joonistamise suunda. See võtab väärtuse true või false. Väärtus true joonistab kaare päripäeva ja väärtus false - vastupäeva (vaikimisi).

Joonistamisel saab määrata alg- ja lõppnurga. Neid nurki mõõdetakse radiaanides, mitte kraadides. Kraadide teisendamiseks radiaanideks võite kasutada järgmist funktsiooni:

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

Süntaks

javascriptkontekst.arc(x, y, raadius, algusnurk, lõppnurk, [suund = false]);

Näide

Joonistame ringjoone:

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;
}

Результат:

Näide

Joonistame pool ringjoont:

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;
}

Результат:

Näide

Joonistame pool ringi (täidame kontuuri meetodiga 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;
}

Результат:

Vaata ka