Metode arc

Metode arc menggambar busur dengan pusat pada titik yang ditentukan, radius tertentu. Busur ini akan terlihat hanya jika metode stroke atau fill diterapkan. Pada kasus pertama akan menghasilkan kontur, dan pada kasus kedua - bentuk terisi.

Parameter opsional terakhir mengatur arah menggambar. Parameter ini menerima nilai true atau false. Nilai true menggambar busur searah jarum jam, sedangkan nilai false - berlawanan arah jarum jam (default).

Dapat ditentukan sudut awal dan akhir saat menggambar. Sudut-sudut ini diukur dalam radian, bukan derajat. Untuk mengonversi derajat ke radian Anda dapat menggunakan fungsi berikut:

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

Sintaks

javascriptkonteks.arc(x, y, radius, sudut awal, sudut akhir, [arah = false]);

Contoh

Mari gambar sebuah lingkaran:

html<canvas id="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();

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

Результат:

Contoh

Mari gambar setengah lingkaran:

html<canvas id="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();

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

Результат:

Contoh

Mari gambar setengah bulat (isi kontur dengan fill):

html<canvas id="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();

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

Результат:

Lihat juga