Tutorial Sederhana Memakai Htm5 Canvas (Untuk Pemula)
Canvas adalah bab dari HTML5 dan memungkinkan untuk melaksanakan render scriptable bentuk 2D dan gambar bitmap. Canvas awalnya diperkenalkan oleh Apple untuk dipakai di Mac OS komponen X WebKit sendiri pada tahun 2004, powering aplikasi ibarat 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 gres untuk teknologi web generasi berikutnya.
Contoh sederhana penggunaan html5 canvas, pada pola di bawah ini aku menciptakan box 2D sederhana dengan memakai canvas.
HTML5 Canvas sendiri sudah di dukung oleh browser masa sekarang ibarat :
- 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)
# Draw text
Untuk menggambar teks pada kanvas, kita sanggup memakai 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 masalah ini aku tidak akan menciptakan pola yang rumit, aku hanya akan menciptakan garis sederhana dengan memakai canvas.
Untuk menggambar garis, aku memakai empat metode canvas API. Sita mulai dengan method beginPath() yang menginstruksikan browser untuk menggambar path baru. Selanjutnya, aku akan memakai moveTo(x, y), method ini berfungsi untuk mengatur titik awal garis. Lalu aku akan memakai method lineTo(x, y) menetapkan titik simpulan dan menarik garis dengan menghubungkan dua titik.
Pada titik ini, garis tersebut akan ditarik, tapi masih bisa terlihat. Untuk membuatnya terlihat aku memakai method stroke() untuk menampilkan garis dengan warna hitam (default).
Diluar itu ada juga beberapa pola pengunaan HTML5 Canvas yang sangat kompleks, kau bisa melihatnya di :
- The Cloth Simulation
- Ball pool
- Flat surface shader
- Piano
- overthetinyhills
- Origami
- Trail
- The brushes are back
Untuk pembelajaran lebih lanjut kau bisa lihat di :
Satu lagi sebelum aku mengakhiri bahan wacana html5 canvas ini, untuk mempermudah kau dalam menciptakan canvas, di internet sudah terdapat beberapa source yang sanggup kau pakai, diataranya :
Mungkin pembahasan kali ini aku cukupkan hingga disini, mohon maaf kalau ada salah-salah kata dan kekurangan. Semoga bermanfaat.
danke schön
Sumber :
Sumber http://www.kang-cahya.com
0 Response to "Tutorial Sederhana Memakai Htm5 Canvas (Untuk Pemula)"
Posting Komentar