Algorithma Hujan Salju dengan HTML5 Canvas

Oleh Uboiz - Februari 05, 2020

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>