Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <canvas id="c"></canvas>
</body>
</html>
 
// link http://thecodeplayer.com/walkthrough/bouncing-squares-particle-system-basic-gravity
var c=document.getElementById('c');
var ctx=c.getContext('2d');
// full screen
c.height=window.innerHeight;
c.width=window.innerWidth;
var chinese="白色的野鹤啊,请将飞的本领借我一用";
// converting
chinese=chinese.split("");
var font_size=10;
var columns=c.width/font_size;
var drops=[];
for(var x=0;x<columns;x++){
  drops[x]=1;
}
// drawing the characters
function draw(){
  // black BG for the canvas
  ctx.fillStyle="rgba(0,0,0,0.05)";
  ctx.fillRect(0,0,c.width,c.height);
  ctx.fillStyle="#0f0";
  ctx.font=font_size+"px";  
  
  // looping over drops
  for(var i=0;i<drops.length;i++){
    var text=chinese[Math.floor(Math.random()*chinese.length)];
    ctx.fillText(text,i*font_size,drops[i]*font_size);
    
    if(drops[i]*font_size>c.height&&Math.random()>0.99){
     drops[i]=0; 
    } 
      
    drops[i]++;
  }
}
setInterval(draw,1000/30);
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
fakefish_wjypro
0viewers