Melukis Bulatan melalui canvas pada JavaScript
Kaedah seterusnya arc melukis lengkok dengan
titik pusat pada suatu titik. Ia menerima parameter
berikut: x, y, jejari r,
sudut permulaan startAngle, sudut
penghujung endAngle, lukis mengikut atau lawan
arah jam direction.
Parameter direction menerima nilai berikut: true menyebabkan
lukisan mengikut arah jam, false lawan arah jam (secara lalai).
Sudut dalam kaedah arc diukur dalam radian,
bukan dalam darjah. Untuk menukar darjah kepada radian
anda boleh menggunakan fungsi berikut:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Mari lukis bulatan
<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();
:
Mari lukis separuh bulatan
<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();
:
Mari lukis separuh bulatan padat
<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(); // isi kontur
:
