Author : Lucky Lukhman / 07 Maret 2018
39 / 0

Assalamu'alaikum wr. wb

Sebelum pembahasan mengenai HTML5 Canvas, kita mundur dulu untuk mengenang era nya FLASH, iyah sebelum adanya HTML5 dulu setiap browser dan website memanfaatkan FLASH untuk me-load setiap gambar ataupun videonya, sampai video di youtube pun dahulu tidak dapat dimainkan jika FLASH belum diinstall pada browser kita. 

Dan sekarang, setalah HTML5 datang maka FLASH pun sudah tidak dapat menunjukan taji nya

Setelah adanya HTML5, maka tugas FLASH pun banyak tergantikan. Dan salah satunya adalah element CANVAS, yang akan kita bahas kali ini.

Sebenarnya apa itu CANVAS?

Jika kita melihat pada dunia nyata, Canvas merupakan media yang biasa digunakan untuk menggambar karya oleh para seniman. Yah tidak jauha beda dengan dipemograman, Canvas pun menjadi element yang dapat dibuat gambar dengan baris CODE.

Namun untuk membuat sebuah grafik, kita harus menggunakan JavaScript. karena Elemen Canvas nya sendiri hanyalah sebuah wadah untuk grafis. Di Canvas sendiri memiliki beberapa metode untuk menggambar sebuat Path, kotak, Lingkaran, Teks dan menambahkan gambar.

Untuk membuat canvas sederhana, kita dapat mencobanya sekarang. Salin script dibawah lalu coba jalankan dibrowser kalian.

		<!DOCTYPE html>
		<html>
		<body>
		 
		<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
		</canvas>
		 
		</body>
		</html>
       

Maka, jika berhasil akan didapatkan sebuah kotak yang tampil dibrowser kalian seperti dibawah

Nah, sekarang kita sudah dapat dasar pemogramannya, waktunya untuk mulai mengeksplor daya imajinasi kita.

Okay, sekian untuk postingan kali ini. Salam Gamer dan tetap ceria dalam menjalankan aktifitasnya hari ini.

Wassalamu'alaikum wr. wb.

 

 

Sumber :w3schools.com/


Share with