Teken van sirkels deur canvas op JavaScript

Die volgende metode arc teken 'n boog met die middelpunt by 'n sekere punt. Dit aanvaar die volgende parameters: x, y, radius r, beginhoek startAngle, eindhoek endAngle, teken met of teen kloksgewys direction.

Die parameter direction aanvaar die volgende waardes: true laat dit met kloksgewys teken, false teen kloksgewys in (standaard).

Die hoeke in die metode arc word gemeet in radiale, nie in grade nie. Om grade na radiale om te skakel kan jy die volgende funksie gebruik:

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

Kom ons teken 'n sirkel

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

Результат:

Kom ons teken 'n halwe sirkel

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

Результат:

Kom ons teken 'n halwe sirkel (gevul)

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(); // vul die kontoer in

Результат:

Praktiese take