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:

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

Sintaks

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

Contoh

Mari gambar sebuah lingkaran:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let 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:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let 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):

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let 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

metode rect,
yang menggambar persegi panjang