Halo, teman-teman! Kamu pernah kebayang gak sih, bikin gambar kayak di aplikasi Paint, tapi menggunakan kode? Yap! Kamu bisa mulai menggambar dengan menulis kode dari artikel ini. Pada artikel ini, kita akan belajar sedikit tentang grafika komputer menggunakan bahasa pemrograman JavaScript.
Menggambar dengan bahasa pemrograman JavaScript bisa dilakukan menggunakan HTML5 Canvas API. Pada artikel ini kita akan menggunakan code editor daring, Codepen sehingga kita tidak perlu melakukan konfigurasi apa-apa. Hal pertama yang harus dilakukan adalah membuka situs codepen.io, lalu mendaftarkan akun dan membuat pen baru. Jika pen baru sudah dibuat, maka tampilannya akan menjadi seperti di bawah ini:
Jika layout-nya berbeda dengan di atas, kamu cukup menggantinya di pojok kanan atas.
Membuat elemen <canvas> pada HTML
Hal selanjutnya yang harus kita lakukan adalah membuat elemen <canvas> sebagai elemen tempat gambar kita akan di-render nantinya.
<canvas id="canvasku" width="512" height="512"></canvas>
Pada elemen tersebut, terdapat atribut id sebagai selector yang akan kita gunakan pada kode JavaScript. Selain itu terdapat pula atribut width dan height untuk mendefinisikan ukuran kanvas yang kita inginkan.
Mempersiapkan kode JavaScript
Salah satu fungsi dasar JavaScript adalah memanipulasi DOM (document object model) yang ada pada HTML. Maka dari itu, yang harus kita tulis pertama kali pada kode JavaScript adalah selector untuk memilih elemen HTML apa yang akan kita manipulasi. Pada kasus ini, kita menggunakan id sebagai selector elemen kanvas kita. Setelah kita memilih elemen dengan selector, maka kita akan menyimpannya ke dalam variabel context.
const context = document.getElementById("canvasku");
Untuk memeriksa apakah elemen kanvas sudah di-select dengan benar, kita cetak variabel context menggunakan console.log().
Menu console dapat dibuka dari menu yang ada di pojok kiri bawah
Selanjutnya, kita akan memanggil Context API 2D ke dalam variabel ctx. Context ini digunakan untuk memanggil API agar kita bisa menggambar menggunakan fungsi-fungsi yang ada.
const ctx = context.getContext("2d");
Setelah itu, kita sudah dapat menggunakan fungsi-fungsi yang ada pada HTML Canvas API.
Hal dasar yang perlu diketahui dalam grafika komputer adalah:
- Berbeda dengan koordinat kartesius, koordinat
(0, 0)pada layar komputer berada pada kiri atas. Sehingga sumbu x positif berada di sebelah kanan, dan sumbu y positif berada di bawah- Seluruh gambar yang di-render pada komputer didasarkan pada fungsi-fungsi matematis. Sering juga disebut sebagai vector atau path
- Meskipun gambar di-render sebagai vector, luaran yang dihasilkan dan dilihat oleh mata kita pada layar berbentuk pixel atau bitmap
Menggambar garis
Untuk menggambar garis pada HTML Canvas, gunakan kode seperti di bawah ini:
// Membersihkan atribut path sebelumnya
ctx.beginPath();
// Memindahkan "pena" ke titik (x, y)
ctx.moveTo(70, 120);
// Membuat garis dari (x, y) ke (xa, ya)
ctx.lineTo(150, 200);
// Membuat garis dari (xa, ya) ke (xb, yb)
ctx.lineTo(180, 150);
// Menggambar garis
ctx.stroke();
Dari kode di atas, terdapat 4 fungsi yang kita gunakan. Yang pertama adalah beginPath(). Fungsi ini digunakan untuk menghapus atau membersihkan atribut yang digunakan pada path sebelumnya, sehingga path yang akan kita gambar setelahnya tidak menggunakan atribut pada path sebelumnya.
Kemudian yang kedua adalah fungsi moveTo(x, y). Fungsi ini berguna untuk memindahkan posisi kursor atau "pena" yang akan digunakan nanti saat menggambar. Jadi, garis yang akan digambarkan dimulai dari titik (x, y) pada parameter fungsi moveTo(x, y).
Yang ketiga adalah fungsi lineTo(xa, ya). Fungsi inilah yang akan membuat garis dari titik awal (x, y) menuju titik (xa, ya). Fungsi lineTo() selanjutnya akan dimulai dari titik (xa, ya).
Dan yang terakhir adalah fungsi stroke(). Fungsi ini digunakan untuk me-render atau menggambar seluruh garis yang telah didefinisikan sebelumnya. Pada fungsi ini, line atau path yang sudah didefinisikan sebelumnya akan di-render pada kanvas.
Hasil akhir gambar akan terlihat seperti ini:
Menggambar persegi panjang
Hal paling mudah pada HTML Canvas adalah menggambar persegi panjang menggunakan fungsi fillRect(). Cukup masukkan kode berikut ke dalam file JavaScript:
// fillRect(x, y, width, height);
ctx.fillRect(0, 0, 200, 100);
Dari kode di atas, kita menggambarkan persegi panjang dari titik (0, 0) dengan lebar 200px ke arah kanan dan tinggi 100px ke arah bawah sesuai dengan koordinat pada grafika komputer.
Dari sini akan tampak persegi panjang berwarna hitam dengan atribut panjang dan lebar sesuai ketentuan kode di atas. Agar lebih menarik, kita ubah warna dari persegi panjang tersebut. Untuk mengubah warna, gunakan atribut fillStyle = "<WARNA>". Letakkan kode berikut di atas baris fungsi gambar persegi panjang.
// Mengatur warna fill menjadi hijau
ctx.fillStyle = "green";
Seluruh elemen yang kita gambar setelah baris kode di atas akan memiliki atribut fillStyle dengan warna hijau. Jika kita menginginkan warna lain untuk elemen lain setelahnya, maka atribut fillStyle harus di-override dengan warna yang diinginkan selanjutnya.
Menggambar lingkaran
Setelah itu, kita akan menggambar lingkaran menggunakan fungsi arc().
// Membersihkan atribut path sebelumnya
ctx.beginPath();
// Mengatur warna stroke menjadi biru
ctx.strokeStyle = "blue";
// Membuat lingkaran dengan arc(x, y, r, start, end)
ctx.arc(300, 100, 50, 0, 2*Math.PI);
// Menggambar lingkaran
ctx.stroke();
Fungsi arc() digunakan untuk menggambar lingkaran dengan parameter titik pusat lingkaran, radius, serta derajat awal dan akhir dari lingkaran. 0 derajat dari lingkaran dimulai dari sebelah kanan titik pusat lingkaran sejauh radius dan terus berputar searah jarum jam. Gambar lingkaran akan terlihat seperti ini:
Menggabungkan gambar dengan konsep pemrograman
Dari lingkaran yang sudah kita buat sebelumnya, kita duplikasi lingkaran tersebut menggunakan for loop. Kita cukup membungkus kode pembuatan lingkaran ke dalam for loop seperti ini:
for(let i=0; i<4; i++) {
// Membersihkan atribut path sebelumnya
ctx.beginPath();
// Mengatur warna stroke menjadi biru
ctx.strokeStyle = "blue";
// Membuat lingkaran dengan arc(x, y, r, start, end)
ctx.arc(300, 100+(i*70), 50, 0, 2*Math.PI);
// Menggambar lingkaran
ctx.stroke();
}
Maka lingkaran akan terlihat seperti gambar berikut:
Apakah kamu bisa menjelaskan kenapa posisi keempat lingkaran bisa berbeda? Tulis di kolom komentar, ya!
Referensi:
Kode lengkap dan preview dari Codepen dapat dilihat di sini
Top comments (0)