arc-metodi

arc-metodi piirtää kaaren, jonka keskipiste on määritetyssä pisteessä ja säde on määritetty. Tämä kaari tulee näkyväksi vasta, kun käytetään metodeja stroke tai fill. Ensimmäisessä tapauksessa saat ääriviivan ja toisessa - täytetyn muodon.

Viimeinen valinnainen parametri säätelee piirtosuuntaa. Se hyväksyy arvon true tai false. Arvo true piirtää kaaren myötäpäivään ja arvo false - vastapäivään (oletusarvoisesti).

Piirtämisen yhteydessä voidaan määrittää alku- ja loppukulmat. Nämä kulmat mitataan radiaaneina, ei asteina. Voit muuntaa asteet radiaaneiksi seuraavalla funktiolla:

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

Syntaksi

javascriptkonteksti.arc(x, y, säde, alkukulma, loppukulma, [suunta = false]);

Esimerkki

Piirretään ympyrä:

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

Результат:

Esimerkki

Piirretään puoliympyrä:

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

Результат:

Esimerkki

Piirretään puoli ympyrästä (täytetään ääriviiva käyttämällä fill-metodia):

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

Результат:

Katso myös