Sebelum kedatangan HTML5, Game dan elemen multimedia lainnya disajikan dalam browser menggunakan Flash. Show
Banyak game berbasis Flash yang bisa dimainkan melalui browser. Bahkan Flash juga digunakan untuk memutar video. Seingat saya dulu…tanpa Flash Player, kita tidak bisa memutar video di Youtube. Namun semuanya berubah setelah kedatangan HTML5… 1 HTML5 membawa banyak elemen baru yang menggantikan tugas Flash dalam browser. Salah satunya adalah canvas. Apa itu Canvas?Dalam dunia nyata, canvas sering digunakan untuk menggambar dan melukis. Biasanya menggunakan pensil dan cat. Dalam pemrograman, canvas adalah elemen yang bisa digambar dengan kode. 2
Cara Membuat Canvas di HTMLCanvas dapat dibuat dengan tag
Kita berikan sedikit style Selanjutnya kita harus menggunakan DOM API untuk memanipulasi canvas, biasanya dilakukan seperti ini:
Fungsi Selanjutnya variabel Contoh kode lengkapnya:
Sekarang kita punya canvas kosong yang siap untuk digambar… Siapkan imajinasimu dan mulailah menggamabar dengan kode 😄. Menggambar di CanvasJika pada dunia nyata kita menggunakan pensil untuk
menggambar, maka di canvas HTML5 menggunakan objek Objek Nah untuk menggambar dengan method-method tersebut, kita harus menentukan koordinat titik Karena canvas terdiri dari kumpulan piksel yang membentuk diagram kartesius terbalik. Cara Menggambar Titik pada CanvasPertama kita akan coba menggambar sebuah titik. Dalam seni rupa, titik adalah bagian terkecil dari sebuah objek yang menempati suatu ruang. Sedangkan dalam ilmu matematika geometri, titik adalah objek Tapi dalam komputer titik adalah ukuran 1 piksel dari layar. Untuk menggambar titik pada canvas, kita dapat menggunakan method Variabel Mari kita coba dalam kode:
Hasilnya: (Lakukan pembesaran (zoom in) sampai 500% untuk melihatnya) Cara Menggambar Garis pada CanvasGaris adalah kumpulan dari titik-titik yang saling terhubung. Ada empat fungsi yang kita butuhkan untuk membuat garis.
Mari kita coba… Misalkan kita ingin menggambar garis dari titik
Hasilnya: Cara Menggambar Persegi pada CanvasAda tiga fungsi yang digunakan untuk menggambar persegi pada canvas:
Seperti biasa, kita harus memberikan titik koordinat Mari kita coba:
Hasilnya: Lalu bagaimana contoh
yang Method Contohnya: Kita ingin menhapus pada titik
Maka hasilnya: Cara Menggambar Segitiga pada CanvasSegitiga tidak memiliki method tesendiri seperti persegi (rectangle). Namun, bukan berarti kita tidak bisa menggambarnya. Segitiga dapat digambar menggunakan fungsi/method dari garis. Contohnya:
Maka hasilnya: Perhatikan: di sana ada fungsi Pertama gambar garis dari titik awal ke titik ke-2:
Lalu buat garis dari titik ke-2 menuju ke titik 3: Terakhir, buat garis dari titik ke-3 menuju ke titik awal: Maka jadilah segitiga… 😄 Cara Menggambar Lingkaran pada CanvasLingkaran digambar dengan method
Paramter:
Paham…? Mari kita coba:
Hasilnya: Penjelasan: Pertama kita mulai menggmabar dengan Kedua menggmabar lingkaran dengan fungsi Mulai digambar dari arah jam 3 ( Gampang kan? Cara Meyisipkan Teks pada CanvasAda dua fungsi untuk membuat teks:
Fungsi tersebut memiliki tiga parameter yang wajib diberikan:
Mari kita coba:
Hasilnya: Ada pengisian atribut Fungsinya untuk menentukan jenis font serta ukurannya.
Nilainya seperti nilai atribut Cara Me-render Gambar pada CanvasTerakhir, kita akan coba me-render gambar ke canvas. Untuk melakukannya, kita membutuhkan sebuah gambar dan menggunakan fungsi Kita akan menggunakan gambar dari W3Schools: img_the_scream.jpg. Pertama silahkan buat elemen
Kemudian buat tombol render:
Terakhir membuat fungsi
Kode lengkapnya:
Hasilnya: Mudah bukan…? Pemrograman Game Berbasis HTML5Ilmu di atas belumlah cukup untuk membuat game berbasis HTML5 dari nol, karena hanya pengenalan saja. Kita harus pelajari ilmu yang lainnya, seperti:
Bila kamu tidak ingin membuat semua itu dari nol, gunakanlah Game Engine. Karena sudah dibuatkan di sana dan kita tinggal pakai saja. Daftar Game Engine berbasis HTML5 dapat dilihat di: html5gameengine.com Pemrograman Grafis atau Grafika KomputerNah, buat kamu yang tertarik ke pemrograman grafis, bisa coba-coba ide eksperimen berikut:
Akhir Kata…Terima kasih sudah menyimak artikel ini sampai akhir. Selamat belajar dan berimajinasi dengan kode. Selanjutnya silahkan pelajari tentang “ Cara Menggambar Menggunakan Perulangan dan Fungsi Random pada Canvas”. |