HTML Canvas adalah elemen HTML yang memungkinkan Kita menggambar grafik dan animasi menggunakan JavaScript. Dalam tutorial ini, kita akan mempelajari cara menggambar sebuah mobil sederhana menggunakan Canvas.
Persiapan
Pertama-tama, buat elemen <canvas> dalam dokumen HTML Kita dan berikan id agar mudah diakses melalui JavaScript. Misalnya:
<canvas id="Mobilku"></canvas>
Selanjutnya, kita perlu menginisialisasi Canvas dan konteks gambar 2D dalam JavaScript:
const canvas = document.getElementById("Mobilku");
const ctx = canvas.getContext("2d");
Variabel canvas digunakan untuk mengakses elemen Canvas, sedangkan ctx adalah objek CanvasRenderingContext2D yang digunakan untuk menggambar bentuk-bentuk 2D seperti lingkaran, kotak, dan garis.
Menggambar Badan Mobil
Untuk menggambar badan mobil, kita akan menggunakan metode fillRect(). Metode ini menerima empat parameter: koordinat x, koordinat y, lebar, dan tinggi. Kita juga perlu mengatur warna isi menggunakan properti fillStyle.
ctx.fillStyle = "#00A";
ctx.fillRect(100, 200, 200, 50);
Kode di atas akan menggambar persegi panjang berwarna biru tua dengan lebar 200 piksel dan tinggi 50 piksel, dimulai dari koordinat (100, 200).
Menggambar Atap Mobil
Untuk menggambar atap mobil, kita akan menggunakan metode beginPath(), moveTo(), lineTo(), closePath(), dan fill(). Pertama, kita memulai jalur baru dengan beginPath(), kemudian memindahkan titik awal ke koordinat tertentu menggunakan moveTo(). Selanjutnya, kita menggambar garis-garis menggunakan lineTo() untuk membentuk segitiga. Terakhir, kita menutup jalur dengan closePath() dan mengisi warna dengan fill().
ctx.beginPath();
ctx.moveTo(125, 200);
ctx.lineTo(200, 150);
ctx.lineTo(275, 200);
ctx.closePath();
ctx.fillStyle = "#00A";
ctx.fill();
Menggambar Roda Mobil
Untuk menggambar roda mobil, kita akan menggunakan metode arc(). Metode ini menerima lima parameter: koordinat x pusat lingkaran, koordinat y pusat lingkaran, radius, sudut awal (dalam radian), dan sudut akhir (dalam radian).
ctx.beginPath();
ctx.arc(150, 250, 25, 0, 2 * Math.PI);
ctx.fillStyle = "#000";
ctx.fill();
ctx.stroke();
Kode di atas akan menggambar lingkaran hitam dengan radius 25 piksel pada koordinat (150, 250). Kita menggunakan fill() untuk mengisi warna dan stroke() untuk menggambar garis tepi.
Ulangi langkah yang sama untuk menggambar roda mobil kanan dengan koordinat yang berbeda.
Kesimpulan
Dalam tutorial ini, kita telah mempelajari cara menggambar mobil sederhana menggunakan HTML Canvas dan JavaScript. Kita menggunakan berbagai metode seperti fillRect(), beginPath(), moveTo(), lineTo(), closePath(), fill(), arc(), dan stroke() untuk membuat bentuk-bentuk dasar seperti persegi panjang dan lingkaran.
Canvas menawarkan banyak kemungkinan untuk membuat gambar dan animasi yang menarik. Dengan kreativitas dan imajinasi, Kita dapat menciptakan karya seni digital yang menakjubkan.
Jika Kita tertarik untuk mempelajari lebih lanjut tentang Canvas, berikut adalah beberapa sumber daya yang bermanfaat:
Selamat berkreasi dengan HTML Canvas!