Sunday, February 26, 2017

Tutorial sederhana menggunakan HTM5 Canvas (untuk pemula)

Tutorial sederhana menggunakan HTM5 Canvas (untuk pemula)

Canvas adalah bagian dari HTML5 dan memungkinkan untuk melakukan render scriptable bentuk 2D dan gambar bitmap. Canvas awalnya diperkenalkan oleh Apple untuk digunakan di Mac OS komponen X WebKit sendiri pada tahun 2004, powering aplikasi seperti widget Dashboard dan browser Safari. Kemudian, pada tahun 2005 diadopsi dalam Gecko browser versi 1.8, dan Opera pada tahun 2006, dan distandarisasi oleh Web Hypertext Application Technology Working Group (WHATWG) dari spesifikasi yang diusulkan baru untuk teknologi web generasi berikutnya.

Contoh sederhana penggunaan html5 canvas, pada contoh di bawah ini saya membuat box 2D sederhana dengan menggunakan canvas.



HTML5 Canvas sendiri sudah di dukung oleh browser masa kini seperti :
  • Google chrome 4.0 (ke atas)
  • Microsoft edge 9.0 (ke atas)
  • Mozila firefox 2.0 (ke atas)
  • Safari 3.1 (ke atas)
  • Opera 9.0 (ke atas)
HTML5 Canvas memiliki beberapa kemampuan, sebagai berikut :

# Draw text
Untuk menggambar teks pada kanvas, kita dapat menggunakan fillText (string, x, y) bersama dengan properti font untuk mengatur font, ukuran, dan gaya teks (mirip dengan font yang ada di CSS).



#Draw Graphics
Pada kasus ini saya tidak akan membuat contoh yang rumit, saya hanya akan membuat garis sederhana dengan menggunakan canvas.

Untuk menggambar garis, saya menggunakan empat metode canvas API. Sita mulai dengan method beginPath() yang menginstruksikan browser untuk menggambar path baru. Selanjutnya, saya akan menggunakan moveTo(x, y), method ini berfungsi untuk mengatur titik awal garis. Lalu saya akan menggunakan method lineTo(x, y) menetapkan titik akhir dan menarik garis dengan menghubungkan dua titik.

Pada titik ini, garis tersebut akan ditarik, tapi masih bisa terlihat. Untuk membuatnya terlihat saya menggunakan method stroke() untuk menampilkan garis dengan warna hitam (default).



Diluar itu ada juga beberapa contoh pengunaan HTML5 Canvas yang sangat kompleks, kamu bisa melihatnya di :
Untuk pembelajaran lebih lanjut kamu bisa lihat di :
Satu lagi sebelum saya mengakhiri materi tentang html5 canvas ini, untuk mempermudah kamu dalam membuat canvas, di internet sudah terdapat beberapa source yang dapat kamu pakai, diataranya :
Mungkin pembahasan kali ini saya cukupkan sampai disini, mohon maaf bila ada salah-salah kata dan kekurangan. Semoga bermanfaat.

~ danke schön

Sumber : 

Saya hanya seorang "newbie" yang baru bisa ngoding lohor kemarin.


EmoticonEmoticon