Kaedah arc

Kaedah arc melukis lengkok dengan pusat pada titik yang ditentukan, jejari yang ditentukan. Lengkok ini akan kelihatan hanya jika kaedah stroke atau fill diterapkan. Dalam kes pertama akan terdapat kontur, dan dalam kes kedua - bentuk.

Parameter pilihan terakhir mengawal arah lukisan. Ia menerima nilai true atau false. Nilai true melukis lengkok mengikut arah jam, dan nilai false - lawan arah jam (secara lalai).

Anda boleh menetapkan sudut permulaan dan penamatan semasa melukis. Sudut ini diukur dalam radian, bukan dalam darjah. Untuk menukar darjah kepada radian anda boleh menggunakan fungsi berikut:

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

Sintaks

konteks.arc(x, y, jejari, sudut permulaan, sudut penamatan, [arah = false]);

Contoh

Mari lukis bulatan:

<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 lukis separuh bulatan:

<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 lukis separuh bulatan (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

kaedah rect,
yang melukis segi empat tepat