JavaScript - Canvas: Panduan untuk Pemula dalam Menggambar Digital

Hai sana, calon pemrogrammer! Saya sangat senang menjadi pandu Anda dalam perjalanan yang menarik ini ke dunia JavaScript dan Canvas. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya bisa katakan bahwa Canvas adalah salah satu topik yang paling menyenangkan dan menghasilkan untuk dipelajari. Itu seperti memiliki tempat bermain digital di browser Anda!

Apa Itu Canvas?

Sebelum kita masuk ke kode, mari kita pahami apa itu Canvas. Bayangkan Anda memiliki lembar kertas kosong dan set pena berwarna. Itu sebenarnya apa yang Canvas adalah di dunia digital - area kosong di halaman web Anda tempat Anda bisa menggambar apa pun yang Anda inginkan menggunakan JavaScript!

Canvas diperkenalkan dengan HTML5 dan sejak itu menjadi alat yang kuat untuk menciptakan grafik, animasi, bahkan permainan langsung di browser. Itu seperti memiliki studio seni kecil di dalam editor kode Anda!

Menangani Canvas dengan JavaScript

Sekarang, mari kita lipat lengan dan mulai menggambar! Pertama, kita perlu mengatur Canvas kita di HTML.

<canvas id="myCanvas" width="400" height="200"></canvas>

Ini menciptakan elemen canvas yang 400 piksel lebar dan 200 piksel tinggi. Bayangkan itu sebagai papan menggambar digital Anda.

Memulai dengan Canvas

Untuk mulai menggambar di canvas, kita perlu mendapatkan referensi kepadanya dalam kode JavaScript kita dan mendapatkan konteks penggambarannya.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

Metode getContext('2d') memberikan kita konteks rendering 2D - alat yang kita akan gunakan untuk menggambar di canvas.

Menggambar Bentuk

Mari kita mulai dengan sesuatu yang sederhana - menggambar persegi panjang!

ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 75);

Kode ini menggambar persegi panjang biru mulai dari koordinat (50, 50) dengan lebar 100 piksel dan tinggi 75 piksel. Itu seperti memberi tahu pena digital Anda, "Hey, gambarkan persegi panjang biru di sini, dan buatnya ini besar!"

Menggambar Garis

Sekarang, mari kita mencoba menggambar garis:

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 100);
ctx.stroke();

Kode ini memulai path baru, memindahkan " pena " ke (50, 50), kemudian menggambar garis ke (200, 100), dan akhirnya menggambar path untuk membuatnya terlihat. Itu seperti bermain connect-the-dots, tapi dengan kode!

Menggambar Lingkaran

Bagaimana kalau kita menggambar wajah senyum? Pertama, mari kita menggambar lingkaran untuk wajah:

ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.stroke();

Ini menggambar lingkaran kuning dengan garis hitam. Metode arc mungkin terlihat sedikit menakutkan, tapi pikirkan itu sebagai memberi tahu pena Anda, "Gambar lingkaran yang terpusat di (200, 100), dengan radius 50, mulai dari 0 dan sepanjang lingkaran (itu artinya Math.PI * 2)."

Menambahkan Teks

Mari kita menambahkan beberapa teks ke canvas:

ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello, Canvas!', 10, 30);

Ini mengatur font ke 20-pixel Arial, mengatur warna ke hitam, dan menulis "Hello, Canvas!" mulai dari posisi (10, 30).

Contoh

Sekarang kita sudah menutupi dasar-dasar, mari kita lihat beberapa contoh yang menarik untuk melihat apa yang benar-benar bisa dilakukan Canvas!

Contoh 1: Menggambar Rumah

// Mengatur canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Menggambar tubuh rumah
ctx.fillStyle = 'brown';
ctx.fillRect(100, 100, 150, 100);

// Menggambar atap
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(175, 50);
ctx.lineTo(250, 100);
ctx.fillStyle = 'red';
ctx.fill();

// Menggambar pintu
ctx.fillStyle = 'blue';
ctx.fillRect(150, 150, 50, 50);

// Menggambar jendela
ctx.fillStyle = 'yellow';
ctx.fillRect(200, 120, 30, 30);

Kode ini menggambar rumah sederhana dengan tubuh coklat, atap merah, pintu biru, dan jendela kuning. Itu seperti membangun rumah dengan blok kode instead of Lego!

Contoh 2: Lingkaran Bergerak

Mari kita membuat sesuatu yang bergerak! Ini adalah animasi sederhana lingkaran yang melompat:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = 50;
let y = 50;
let dx = 2;
let dy = 2;
const radius = 20;

function drawCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();

if (x + radius > canvas.width || x - radius < 0) {
dx = -dx;
}
if (y + radius > canvas.height || y - radius < 0) {
dy = -dy;
}

x += dx;
y += dy;

requestAnimationFrame(drawCircle);
}

drawCircle();

Kode ini menciptakan lingkaran hijau yang melompat di sekitar canvas. Itu seperti membuat permainan kecil Pong sendiri!

Tabel Metode Canvas

Berikut adalah tabel metode Canvas yang lazim digunakan yang kita gunakan dan beberapa lainnya:

Metode	Deskripsi
fillRect(x, y, width, height)	Menggambar persegi panjang berisi
strokeRect(x, y, width, height)	Menggambar garis persegi panjang
clearRect(x, y, width, height)	Membersihkan area persegi panjang yang ditentukan
beginPath()	Memulai path baru
moveTo(x, y)	Memindahkan path ke titik yang ditentukan
lineTo(x, y)	Menggambar garis ke titik yang ditentukan
arc(x, y, radius, startAngle, endAngle)	Menggambar lingkaran atau busur
fill()	Mengisi path saat ini
stroke()	Menggambar garis path saat ini
fillText(text, x, y)	Menggambar teks berisi di canvas
strokeText(text, x, y)	Menggambar garis teks di canvas

Ingat, belajar mengkode adalah seperti belajar bahasa baru. Itu memerlukan waktu dan latihan, tapi sebelum Anda mengetahui, Anda akan menciptakan hal-hal yang menakjubkan dengan Canvas! Tetap mencoba, cobalah menggabungkan bentuk dan metode yang berbeda, dan terutama, bersenang-senang dengan itu. Siapa tahu? Permainan web besar berikutnya mungkin akan diciptakan oleh Anda menggunakan Canvas!

Credits: Image by storyset