Blogger Tutorial

Demo HTML 5 Canvas Bezier Curve - Raining Cloud

21.32,0 Comments


OK setelah main-main sama Per, kali ini saya mau menunjukkan Demo ke-2 dari HTML5 Canvas Bezier Curve. Kita namain aja Raining Cloud(Awan Hujan), soalnya bentuknya ya Awan yang lagi hujan hhe... kita bisa membuat awan ini dengan menghubungkan serangkaian Kurva Bezier. Dan untuk bentuk hujannya, kita dapat menggambar Garis vertikal pendek yang diatur beberapa milidetik untuk turun dibawah awan. Dan untuk demo kali ini saya buat garis-garis hujan tersebut turun per 40ms. Disini saya menggunakan fungsi Math.Rand() untuk mengacak penempatannya.

Setiap kali frame diberikan, kita bisa menaikkan posisi y untuk menstimulasi jatuhnya hujan. Dan disini, saya pun menggunakan onmousedown, onmousemove, Dan onmouseup untuk membuat Awan dapat di Drag and Drop.

Dari pada kelamaan membayangkan, silahkan langsung ke TKP untuk melihat penampakannya


Setelah melihat demonya, silahkan Tuangkan kreasi anda dan ciptakan bentuk lain dari HTML5 Canvas Bezier Curve ini....

Ps: Awan Dalam Page Demo dapat anda Drag And Drop....




hosting indonesia

You Might Also Like

0 komentar: