Apskritimų piešimas per canvas JavaScript

Kitas metodas arc piešia lanką su centru tam tikrame taške. Jis priima šiuos parametrus: x, y, spindulys r, pradinis kampas startAngle, galutinis kampas endAngle, piešti pagal arba prieš laikrodžio rodyklę direction.

Parametras direction priima šias reikšmes: true verčia piešti pagal laikrodžio rodyklę, false prieš laikrodžio rodyklę (numatytasis).

Be to, kampai metode arc matuojami radianais, ne laipsniais. Norėdami konvertuoti laipsnius į radianus galite naudoti šią funkciją:

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

Nupieškime apskritimą

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

Результат:

Nupieškime pusę apskritimo

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

Результат:

Nupieškime pusę apskritimo užpildytą

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(); // užpildykime kontūrą

Результат:

Praktinės užduotys