Algorithma Hujan Salju dengan HTML5 Canvas
Melihat animasi hujan salju di salah satu video yang penulis temukan di Youtube. Membuat penulis penasaran mengimplementasikan bagaimana caranya membuat animasi hujan salju, menggunakan HTML5 Canvas.
Berikut ini adalah kode HTML, menggunakan HTML5 Canvas untuk membuat animasi yang penulis inginkan.
<html> <head> <title>Raining Snow</title> </head> <body> <canvas id="myCanvas" width="1024" height="768"> </canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "8px Arial"; var num=3,n=0,all=0; snow=[]; function Menggambar() { if(n%100 && all<3*500){ for(i=0;i<num;i++){ snow[all++]=canvas.width*Math.random(); snow[all++]=-100-1000*Math.random(); snow[all++]=0.1*(-1.0+3.0*Math.random()); } n=0; } ctx.fillStyle = "blue"; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.fillStyle = "white"; for(i=0;i<snow.length/3;i++){ snow[3*i+0]+=snow[3*i+2]; snow[3*i+1]+=0.5; ctx.fillText("*",snow[3*i+0],snow[3*i+1]); if(snow[3*i+1]>canvas.height){ snow[3*i+0]=canvas.width*Math.random(); snow[3*i+1]=-100; } } n++; window.requestAnimationFrame(Menggambar); } Menggambar(); </script> </body> </html>
Penulis tidak menambahkan macam-macam tambahan, hanya lebih berorientasi perpindahan posisi dari karakter "*".
Komentar
Posting Komentar