Menggambar Lingkaran melalui canvas di JavaScript

Metode berikutnya arc menggambar busur dengan titik pusat di suatu titik. Metode ini menerima parameter-parameter berikut: x, y, radius r, sudut awal startAngle, sudut akhir endAngle, menggambar searah atau berlawanan arah jarum jam direction.

Parameter direction menerima nilai-nilai berikut: true menyebabkan menggambar searah jarum jam, false berlawanan arah jarum jam (secara default).

Namun, sudut-sudut dalam metode arc diukur dalam radian, bukan dalam derajat. Untuk mengonversi derajat ke radian Anda dapat menggunakan fungsi berikut:

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

Mari menggambar lingkaran

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

Результат:

Mari menggambar setengah lingkaran

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

Результат:

Mari menggambar setengah lingkaran penuh (setengah lingkaran yang diisi)

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(); // warnai kontur

Результат:

Tugas-tugas praktis