HTML 5 : Saat Web Menjadi Semakin Kaya
Oleh : Dharmesh Mistry (ComputerWorld.Uk)
Terjemah Bebas oleh Pengelola Blog http://tanyarezaervani.wordpress.com
Posting saya tentang game HTML5 adalah bacaam yang baik jika anda ingin mencari pengalaman dengan salah satu fitur HTML5.
HTML5 tidak diragukan akan memberikan perbedaan yang luar biasa pada browser.
Sulit untuk membayangkan di dunia multimedia yang kaya saat ini tidak ada teknik atau plug-in web standar yang mendukung kerja-kerja sederhana seperti menggambar garis, kotak, lingkaran atau bentuk apapun. Semua ini berubah dengan adanya Canvas API yang ada di HTML5.
<canvas> </canvas>
Ini adalah elemen kanvas dasar yang akan mengatur web yang penuh dengan animasi dan petualangan yang lebih kaya.
Ia sudah mentransformasikan semua seni yang mungkin dari teknik game yang ada di web. Berasal dari API 2D yang dibuat didalam webkit oleh Apple. Apple kemudian menyerahkannya kepada lembaga standarisasi dengan lisensi paten bebas royalti.
Pada Februari tahun ini Khronos Group meluncurkan versi 1.0 dari API WebGL-nya yang menyediakan kemampuan rendering 3D didalam browser.
Jadi apa itu Kanvas ?
Sebuah canvas intinya adalah wilayah persegi di layar dimana anda dapat menambahkan dan memanipulasi grafis. Sederhana ? Tidak juga.
Kegiatan dasar untuk menggambar sebuah garis membutuhkan hal-hal sebagai berikut : membuat kanvas, menentukan konteks dari kanvas, memulai sebuah path (beginPath()), mendefinisikan titik mulai ((moveTo(x, y)), menentukan titik akhir dari garis (lineTo( x, y )), menutup path untuk mengatakan bahwa kita selesai menggambar (closepath()) dan terakhir menuliskan gambar tersebut (stroke()).
Jika hal tadi terdengar cukup kompleks, saya ingin mengatakan kepada anda, hal itu jauh lebih sederhana dibandingkan jika anda ingin membuat hal yang sama sebelum teknologi ini ada.
Anda dapat membuat bentuk yang kompleks maupun sederhana menggunakan “paths”. Menggambar sebuah garis mengikuti path tersebut hanya akan bisa jika anda mengaktifkan stroke() . Jika path digunakan untuk membuat sebuah bentuk tertentu maka ia juga dapat “diisi” dengan menggunakan fill() . Sebuah “isi” dapat berupa warna atau gaya tertentu (misalnya pola, gradien atau gambar).
Jika anda ingin menggambarkan bentuk kurva tertentu, anda dapat menggunakan quadraticCurveTo(), bezierCurveTo(), arcTo() dan arc() untuk membuat sebuah path untuk menggambar kurva.
Terpisah dari kegiatan menggambar dan mewarnai (“filling”) , sebuah gambar dapat pula ditransformasikan ke skala tertentu (scale()), diputar (rotate()) dan dimiringkan (transform ()).
Selain dari bentuk, tentu anda dapat menggambar dan meng”isi” sebuah teks di atas Canvas.
Dan ada juga API untuk membuat atribut untuk bayangan : shadowColor mengatur warna dari bayangan shadowOffsetX dan shadowOffsetY memberikan posisi dari bayangan yang dibuat dari benda atau teks asalnya dan shadowBlur memperkenankan anda untuk membuat bayangan tersebut menjadi samar-samar.
Masih banyak lagi yang bisa diceritakan tentang Kanvas, dan rasanya saya tidak perlu membuat orang bingung dengan tulisan tinjauan singkat ini.
Akhirnya, saya rasa perlu sedikit komentar penutup. Draft spesifikasi terakhir dapat anda lihat di sini. Ke depan, WebGL ini akan menjadi serangkaian pengaturan baru dengan kemampuan yang luar biasa walaupun saat ini ia masih tampak sebagai dukungan dasar fitur sebuah Canvas bagi suatu browser.
Leave a Reply