Ringide joonistamine canvas'i abil JavaScriptis

Järgmine meetod arc joonistab kaare keskpunktiga teatud punktis. See võtab järgmised parameetrid: x, y, raadius r, algusnurk startAngle, lõppnurk endAngle, joonistamine päri- või vastupäeva direction.

Parameeter direction võtab järgmised väärtused: true sunnib joonistama päripäeva, false vastupäeva (vaikimisi).

Samal ajal mõõdetakse nurki meetodis arc radiaanides, mitte kraadides. Kraadide teisendamiseks radiaanideks võite kasutada järgmist funktsiooni:

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

Joonistame ringi

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

Результат:

Joonistame pool ringist

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

Результат:

Joonistame pool ringikujulisest objektist

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(); // värvime kontuuri

Результат:

Praktilised ülesanded