JavaScript arkaly canvas üstünde töwerekleri çyzmak

Indiki usul arc käbir nokatda merkezi bolan arka çyzyar. Ol aşakdaky parametrleri kabul edýär: x, y, radius r, başlangyç burç startAngle, ahyrky burç endAngle, sagat ýönünde ýa-da tersine çyzmak direction.

direction parametri aşakdaky bahalary kabul edýär: true sagat ýönünde çyzmaga mäcbür edýär, false sagat tersine (deslapky ýagdaýynda).

Şeýlelikde, arc usulyndaky burçlar radianda ölçelýär, gradusda däl. Graduslary radianda öwürmek üçin siz aşakdaky funksiýany ulanyp bilersiňiz:

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

Töwerek çyzalyň

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

Результат:

Töweregiň ýarysyny çyzalyň

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

Результат:

Töweregiň ýarym çykarylyşyny çyzalyň

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(); // kontury boýalyň

Результат:

Amaly meseleler