Elemen Ini Memiliki Manfaat Lebih dari Teknologi Lain
HTML5 menyertakan elemen menarik yang disebut CANVAS. Ini memiliki banyak kegunaan, tetapi untuk menggunakannya, Anda perlu mempelajari beberapa JavaScript, HTML, dan terkadang CSS.
Hal ini membuat elemen CANVAS menjadi sedikit menakutkan bagi banyak desainer, dan pada kenyataannya, sebagian besar mungkin akan mengabaikan elemen hingga ada alat yang dapat diandalkan untuk membuat animasi dan permainan CANVAS tanpa mengetahui JavaScript.
Apa HTML5 Kanvas Digunakan Untuk
Elemen HTML5 CANVAS dapat digunakan untuk banyak hal yang sebelumnya, Anda harus menggunakan aplikasi tersemat seperti Flash untuk menghasilkan:
- grafik dinamis
- game online dan offline
- animasi
- video dan audio interaktif
Faktanya, alasan utama orang menggunakan elemen CANVAS adalah karena mudahnya mengubah halaman web polos menjadi aplikasi web dinamis dan kemudian mengonversi aplikasi itu menjadi aplikasi seluler untuk digunakan pada ponsel pintar dan tablet.
Jika Kami Memiliki Flash, Mengapa Kami Perlu Kanvas?
Menurut spesifikasi HTML5, elemen CANVAS adalah:
"... sebuah kanvas bitmap bergantung pada resolusi, yang dapat digunakan untuk menampilkan grafik, grafik game, seni, atau gambar visual lainnya dengan cepat."Elemen CANVAS memungkinkan Anda menggambar grafik, grafik, permainan, seni, dan visual lainnya tepat di halaman web secara real time.
Anda mungkin berpikir bahwa kita sudah bisa melakukannya dengan Flash, tetapi ada dua perbedaan utama antara CANVAS dan Flash:
- Elemen CANVAS disematkan tepat di HTML. Skrip yang menggambar di atasnya baik di HTML atau di file eksternal yang ditautkan. Ini berarti elemen CANVAS adalah bagian dari model objek dokumen, atau DOM.
- Flash adalah file eksternal tertanam. Ia menggunakan elemen EMBED atau OBJECT untuk ditampilkan, dan tidak dapat berinteraksi langsung dengan elemen HTML lainnya. Karena elemen CANVAS adalah bagian dari DOM, ia dapat berinteraksi dengan DOM dalam banyak cara.
- Misalnya, Anda dapat membuat animasi yang berubah ketika beberapa bagian lain dari halaman tersebut berinteraksi dengan - seperti elemen formulir diisi. Dengan Flash, yang paling dapat Anda lakukan adalah memulai film Flash atau animasi, tetapi dengan KANVAS Anda dapat menciptakan banyak efek yang berbeda, bahkan menambahkan teks dari bidang formulir ke dalam animasi.
- Elemen CANVAS secara alami didukung oleh browser web. Agar pengguna benar-benar menggunakan Flash, browser mereka harus memasang plugin. Ini sering menjadi masalah bagi kebanyakan orang karena instalasi Flash yang kedaluwarsa atau fakta bahwa sistem operasi mereka tidak mendukungnya.
- Dulu bahwa setiap browser telah menginstal plugin, tetapi itu tidak lagi terjadi, dan banyak yang bahkan menghapus plugin karena kesulitan. Plus, itu bahkan tidak tersedia di platform iOS populer.
Kanvas Ini Berguna Bahkan Jika Anda Tidak Pernah Merencanakan untuk Menggunakan Flash
Salah satu alasan utama mengapa elemen CANVAS begitu membingungkan adalah banyak desainer yang telah terbiasa dengan web yang sepenuhnya statis. Gambar mungkin beranimasi, tetapi itu dilakukan dengan GIF, dan tentu saja Anda dapat menyematkan video ke dalam laman tetapi sekali lagi, ini adalah video statis yang hanya duduk di laman dan mungkin mulai atau berhenti karena interaksi, tetapi itu saja.
Elemen CANVAS memungkinkan Anda menambahkan lebih banyak interaktivitas ke halaman web Anda karena sekarang Anda dapat mengontrol grafik, gambar, dan teks secara dinamis dengan bahasa scripting. Elemen CANVAS membantu Anda mengubah gambar, foto, bagan, dan grafik menjadi elemen animasi.
Kapan Harus Pertimbangkan Menggunakan Elemen Kanvas
Audiens Anda harus menjadi pertimbangan pertama Anda ketika memutuskan apakah akan menggunakan elemen CANVAS.
Jika audiens Anda terutama menggunakan Windows XP dan IE 6, 7, atau 8, maka menciptakan fitur kanvas dinamis akan menjadi tidak berguna karena browser tersebut tidak mendukungnya.
Jika Anda sedang membangun aplikasi yang akan digunakan pada mesin Windows saja, maka Flash mungkin adalah pilihan terbaik Anda. Aplikasi yang akan digunakan pada komputer Windows dan Mac dapat memanfaatkan aplikasi Silverlight.
Namun, jika aplikasi Anda perlu dilihat pada perangkat seluler (baik Android dan iOS) maupun komputer desktop modern (diperbarui ke versi browser terbaru), maka menggunakan elemen CANVAS adalah pilihan yang baik.
Perlu diingat bahwa menggunakan elemen ini memungkinkan Anda memiliki opsi penggantian seperti gambar statis untuk browser lama yang tidak mendukungnya.
Namun, tidak disarankan untuk menggunakan kanvas HTML5 untuk semuanya. Anda tidak boleh menggunakannya untuk hal-hal seperti logo, judul, atau navigasi (meskipun menggunakannya untuk menganimasikan sebagian dari semua ini akan baik-baik saja).
Sesuai spesifikasi, Anda harus menggunakan elemen yang paling sesuai untuk apa yang Anda coba buat. Jadi menggunakan elemen HEADER bersama dengan gambar dan teks lebih baik daripada elemen CANVAS untuk header dan logo Anda.
Juga, jika Anda membuat halaman web atau aplikasi yang dimaksudkan untuk digunakan dalam media non-interaktif seperti pencetakan, Anda harus menyadari bahwa elemen CANVAS yang telah diperbarui secara dinamis tidak dapat dicetak seperti yang Anda harapkan. Anda mungkin mendapatkan cetakan konten saat ini atau konten fallback.