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 Kanvasuntuk 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 KanvasUntuk 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() Contohnya bisa dilihat di bawah ini
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 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
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 |