Cara Menggambar dan Mengisi Lingkaran di JavaScript Canvas
Canvas HTML5 adalah alat yang ampuh untuk membuat grafik dan animasi di web. Salah satu bentuk dasar yang dapat Anda gambar di canvas adalah lingkaran. Dalam artikel ini, kita akan mempelajari cara menggambar dan mengisi lingkaran menggunakan JavaScript Canvas.
1. Mempersiapkan Canvas
Pertama, kita perlu membuat elemen <canvas> di halaman HTML kita. Kemudian, kita akan mendapatkan konteks 2D dari canvas untuk menggambar di atasnya.
Menggambar Lingkaran
2. Menggambar Lingkaran
Untuk menggambar lingkaran, kita akan menggunakan metode arc() dari konteks 2D. Metode arc() mengambil enam parameter:
- x: Koordinat x pusat lingkaran.
- y: Koordinat y pusat lingkaran.
- radius: Jari-jari lingkaran.
- startAngle: Sudut awal lingkaran dalam radian, diukur dari sumbu x positif.
- endAngle: Sudut akhir lingkaran dalam radian, diukur dari sumbu x positif.
- counterclockwise: (Opsional) Boolean yang menunjukkan apakah lingkaran harus digambar berlawanan arah jarum jam (true) atau searah jarum jam (false). Nilai defaultnya adalah false.
ctx.beginPath(); // Memulai jalur baru
ctx.arc(150, 150, 75, 0, 2 * Math.PI); // Menggambar lingkaran dengan radius 75
ctx.stroke(); // Menggambar garis tepi lingkaran
Kode di atas akan menggambar lingkaran dengan pusat di (150, 150), radius 75, dan sudut mulai dan akhir 0 dan 2π, yang akan menggambar lingkaran penuh.
3. Mengisi Lingkaran
Untuk mengisi lingkaran, kita akan menggunakan metode fill() dari konteks 2D. Sebelum mengisi, pastikan Anda telah memanggil beginPath() dan arc() untuk menentukan bentuk lingkaran.
ctx.beginPath();
ctx.arc(150, 150, 75, 0, 2 * Math.PI);
ctx.fillStyle = 'red'; // Mengatur warna pengisian
ctx.fill(); // Mengisi lingkaran
Kode di atas akan menggambar lingkaran penuh berwarna merah.
4. Menggabungkan Garis Tepi dan Pengisian
Anda dapat menggabungkan garis tepi dan pengisian pada lingkaran dengan memanggil stroke() dan fill() setelah memanggil arc().
ctx.beginPath();
ctx.arc(150, 150, 75, 0, 2 * Math.PI);
ctx.strokeStyle = 'blue'; // Mengatur warna garis tepi
ctx.lineWidth = 5; // Mengatur lebar garis tepi
ctx.stroke();
ctx.fillStyle = 'green'; // Mengatur warna pengisian
ctx.fill();
Kode di atas akan menggambar lingkaran dengan garis tepi biru setebal 5 pixel dan pengisian hijau.
5. Menggambar Lingkaran dengan Gradien
Anda dapat mengisi lingkaran dengan gradien menggunakan metode createLinearGradient() atau createRadialGradient() dari konteks 2D.
Gradien Linear:
const gradient = ctx.createLinearGradient(0, 0, 300, 0); // Membuat gradien linear dari (0, 0) ke (300, 0)
gradient.addColorStop(0, 'red'); // Menambahkan warna merah pada titik awal gradien
gradient.addColorStop(1, 'yellow'); // Menambahkan warna kuning pada titik akhir gradien
ctx.beginPath();
ctx.arc(150, 150, 75, 0, 2 * Math.PI);
ctx.fillStyle = gradient;
ctx.fill();
Kode di atas akan mengisi lingkaran dengan gradien linear dari merah ke kuning.
Gradien Radial:
const gradient = ctx.createRadialGradient(150, 150, 0, 150, 150, 75); // Membuat gradien radial dari pusat (150, 150) dengan radius 0 ke (150, 150) dengan radius 75
gradient.addColorStop(0, 'blue'); // Menambahkan warna biru pada pusat gradien
gradient.addColorStop(1, 'white'); // Menambahkan warna putih pada tepi gradien
ctx.beginPath();
ctx.arc(150, 150, 75, 0, 2 * Math.PI);
ctx.fillStyle = gradient;
ctx.fill();
Kode di atas akan mengisi lingkaran dengan gradien radial dari biru di pusat ke putih di tepi.
6. Menggambar Lingkaran dengan Pola
Anda dapat mengisi lingkaran dengan pola menggunakan metode createPattern() dari konteks 2D.
const image = new Image(); // Membuat objek Image
image.src = 'images/pattern.png'; // Mengatur sumber gambar pola
image.onload = () => { // Menjalankan fungsi ketika gambar dimuat
const pattern = ctx.createPattern(image, 'repeat'); // Membuat pola dengan gambar yang diulang
ctx.beginPath();
ctx.arc(150, 150, 75, 0, 2 * Math.PI);
ctx.fillStyle = pattern;
ctx.fill();
};
Kode di atas akan mengisi lingkaran dengan pola yang diulang dari gambar pattern.png.
Kesimpulan
Ini hanyalah beberapa cara untuk menggambar dan mengisi lingkaran di JavaScript Canvas. Dengan menggabungkan berbagai teknik ini, Anda dapat membuat berbagai bentuk dan desain yang menarik. Jangan ragu untuk bereksperimen dan menjelajahi lebih lanjut kemungkinan yang ditawarkan oleh Canvas.