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:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Mari menggambar lingkaran
<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 menggambar setengah lingkaran
<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 menggambar setengah lingkaran penuh (setengah lingkaran yang diisi)
<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(); // warnai kontur
:
