Dalam tutorial ini, kita akan belajar bagaimana menggunakan kanvas HTML. Kanvas HTML adalah salah satu fitur elemen baru yang ditemukan di versi HTML5
Apa gunanya Kanvas?
Kanvas digunakan sebagai elemen HTML yang dapat digambar dengan perintah bahasa komputer javascript
Membuat Kanvas
untuk menggunakan Canvas, cukup dengan menambahkan tag . Sekarang kita buat sebuah struktur dasar dari halaman html dengan nama file belajarcanvas.html kemudian tambahkan tag canvas dengan tambahan atribut id, width, height pada tag canvas. Seperti contoh yang tertera dibawah ini :
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Canvas</title> </head> <body> <canvas id="myCanvas" width="640" height="480" style="border:1px solid black;"> </canvas> </body> </html>
Membuat Kotak Di Atas Kanvas
Untuk dapat menggambar garis. Pertama, atribut id di atas akan digunakan untuk mendapatkan elemen kanvas html. Dimana nantinya kita akan memanipulasi elemen kanvas tersebut dengan cara menyimpannya pada sebuah variabel dengan nama “kanvas”. Setelah mendapatkan elemen html dengan nama canvas, selanjutnya kita bisa menyimpan variabel baru dengan nama “ctx” dimana variabel ini didapatkan dari fungsi variabel canvas. getContext("2d"). Selanjutnya, kita memanipulasi variabel "ctx" dengan menggunakan beberapa fungsi yang disediakan oleh javascript untuk membuat garis persegi. Fungsinya adalah. strokeRect() dan. isiRect(). Fungsi. strokeRect() digunakan untuk membuat persegi dengan garis polos saja. fillRect() digunakan untuk membuat persegi dengan warna
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Canvas</title> </head> <body> <canvas id="myCanvas" width="640" height="480" style="border:1px solid black;"> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.strokeRect(100,10,100,100); ctx.fillRect(250,10,100,100); </script> </canvas> </body> </html> _
Hasil perintah di atas akan terlihat seperti di bawah ini
Pada kedua fungsi diatas terdapat empat parameter yang berisi variabel (x,y,w,h), dimana variabel pertama mengatur posisi sumbu x, kemudian mengatur posisi sumbu y, lebar dan tinggi dari garis yang akan dibuat
Untuk menggambar di sebagian halaman HTML, kita bisa menggunakan Canvas. Canvas bisa kita gunakan untuk membuat game, atau aplikasi yang butuh gambar. Untuk menggunakan canvas, kita perlu menyediakan tag .
Menampilkan Persegi atau Persegi Panjang dengan Metode rect()
Kita bisa mendapatkan objek yang mewakili kanvas yang akan kita gunakan dengan dokumen. getElementById() . Setelah itu, kita perlu mendapatkan konteks dengan metode getContext() dari objek yang dimiliki oleh tag . Jika sudah mendapatkan konteksnya, kita bisa mengubah isi kanvas dengan menggunakan properti dan metode konteks.
Contohnya bisa dilihat di bawah ini
<HEAD>
<title>Belajar HTML</title>
</HEAD>
<BODY>
<Canvas width="400" height="400" id="kanvasku">
Tidak bisa menampilkan Canvas
</Canvas>
<Script>
kanvas=document.getElementById("kanvasku");//dapatkan canvas
ct=kanvas.getContext("2d");//dapatkan context
//atur warna
ct.fillStyle="yellow";
ct.strokeStyle="green";
ct.lineWidth=4;
//Gambar Persegi
ct.beginPath();
ct.rect(0, 0, 300, 400);
ct.fill();
ct.stroke();
</Script>
</BODY>
</HTML>
Contoh di atas berisi skrip yang menampilkan gambar persegi dengan metode rect(). Sebelum menggunakan metode rect(), kita harus menggunakan fillStyle untuk menentukan warna bagian dalam persegi. Jika Anda ingin menggunakan garis luar, warna garis persegi panjang dapat ditentukan dengan properti strokeStyle. Warna yang bisa kita gunakan bisa berupa nilai heksadesimal atau konstanta warna yang diapit oleh tanda kutip
Menggambar Lingkaran?
Pada contoh di atas kita menggambar sebuah kotak di atas kanvas dengan warna kuning dan tepian hijau. Warna bagian dalam ketika kita menggambar sesuatu di kanvas dapat ditentukan dengan fillStyle, dan warna garis luar dapat ditentukan dengan strokeStyle. lineWidth digunakan untuk menentukan ketebalan garis luar dari bentuk yang akan kita gambar
Jika pada contoh di atas kita menggambar kotak persegi panjang dengan metode rect() , selanjutnya kita akan menggambar setengah lingkaran. Untuk membuat lingkaran, kita menggunakan metode arc() . Untuk membuat lingkaran, kita bisa menggunakan properti "Math. PI" yang digunakan untuk menunjukkan sudut 180 derajat dalam satuan rad (radian). karena π rad sama dengan 180 derajat, maka “ 2*π rad ” adalah sudut sebesar 360 derajat .
Pola penulisan parameter metode arc adalah sebagai berikut
- busur(x, y, radius, sudut_awal, sudut_akhir);
kanvas=document.getElementById("kanvasku");//dapatkan canvas
ct=kanvas.getContext("2d");//dapatkan context
//Atur warna
ct.fillStyle="yellow";
ct.strokeStyle="green";
ct.lineWidth=4;
//Gambar Lingkaran
ct.beginPath();
ct.arc(200, 200, 200, Math.PI, 2*Math.PI);
ct.fill();
ct.stroke();
Ganti script pada kode HTML sebelumnya dengan script di atas
Perbedaan script dengan script sebelumnya hanya metode arc() yang menggantikan metode rect() . Baik metode rect() maupun arc() harus ditempatkan setelah metode beginPath() sehingga hasilnya dapat ditampilkan setelah diberi warna dengan Method fill() sesuai dengan nilai fillStyle(). nilai fillStyle dan strokeStyle sama dengan warna yang bisa kita berikan di CSS.
Metode stroke() digunakan untuk memberikan garis luar sesuai dengan warna properti strokeStyle. Selain menggambar lingkaran, garis dan kotak; . Tapi, saya tidak akan membahasnya di sini. Jika penasaran, baca postingan saya selanjutnya