Pada kesempatan kali ini kita akan mempelajari mengetahui kegunaan canvas element di HTML5, Beberapa waktu yang lalu, untuk dapat membuat gambar yang bisa tampil secara ‘real time’, kita harus menggunakan aplikasi ‘pihak ketiga‘ seperti adobe flash atau microsoft silverlight. Namun saat ini HTML5 membawa serta fitur canvas yang membolehkan kita membuat gambar
langsung menggunakan HTML.Bagaimana teman-teman sudah masih paragraf satu saja kelihatannya tag ini sangat menarik ya, oke jangan kemana-mana simak terus ya teman-teman.
Sebenarnnya untuk mengetahui kegunaan canvas element di HTML5 Canvas membuka banyak kemungkinan yang sebelumnya bisa dibilang mustahil, seperti web based game online, web based photo editing, dll. Walaupun demikian, canvas pada HTML5 sebenarnya bukan ‘murni’ HTML. Seperti yang akan kitapelajari, untuk ‘menggambar’ di dalam canvas, kita harus menggunakan JavaScript. Saya tidak akan membahas terlalu jauh seluruh fitur yang disediakan. Pada kesempatan kali ini hanya sebagai pengantar HTML5 canvas. Ini karena penggunaan canvas harus menggunakan JavaScript.
Oke langsung saja Untuk mulai menggambar, kita harus menyiapkan area yang akan menjadi ‘canvas’ dengan menggunakan tag <canvas>. Seperti contoh berikut:
<canvas id="kertas_gambar" width="500" height="300"></canvas>
Atribut id berfungsi sebagai ‘identitas’ atau ‘label’ dari tag <canvas>. Ini diperlukan karena kita akan mengaksesnya menggunakan JavaScript. Atribut width dan height digunakan untuk men set tinggi serta lebar dari canvas, sehingga kode diatas akan membuat canvas dengan lebar 500 pixel dan tinggi 300 pixel. Jika anda menempatkan kode tersebut kedalam halaman index.html, berikut adalah kode HTML lengkapnya:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mengetahui kegunaan canvas element di HTML5</title>
<style>
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="kertas_gambar" width="500" height="300"></canvas>
</body>
</html>Jika anda menjalankan kode diatas,tanpa menggunakan style CSS di dalam web browser tidak akan terlihat apa-apa. Kenapa? Ini karena secara default <canvas> tidak memiliki garis tepi. Jadi sebenarnya ‘kertas_gambar’ kita sudah tampil, tetapi tidak terlihat.
Bagaimana teman-teman menambah ilmu lagi ya, oke saya rasa cukup sampai disini dulu belajar kita tentang mengetahui kegunaan canvas element di HTML5, semoga bermanfaat dan sampai jumpa di artikel saya selanjutnya terimakasih.
The post Mengetahui Kegunaan Canvas Element di HTML5 appeared first on Kursus Website Terbaik.