Ympyröiden piirtäminen canvasin avulla JavaScriptissä

Seuraava metodi arc piirtää kaaren, jonka keskipiste on tietyssä pisteessä. Se ottaa seuraavat parametrit: x, y, säde r, aloituskulma startAngle, lopetuskulma endAngle, piirtääkö myötä- vai vastapäivään direction.

Parametri direction hyväksyy seuraavat arvot: true pakottaa piirtämään myötäpäivään, false vastapäivään (oletusarvoisesti).

Samalla kulmat metodissa arc mitataan radiaaneina, ei asteina. Asteiden muuntamiseksi radiaaneiksi voit käyttää seuraavaa funktiota:

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

Piirretään ympyrä

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();

Результат:

Piirretään puoli ympyrää

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();

Результат:

Piirretään puoli ympyrän täytettä

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(); // täytetään ääriviiva

Результат:

Käytännön tehtävät