js+canvas实现文字坠落效果

核心代码块：

window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var chinese = "123456789";
var colunms = 0;
var fontSize = 14;
var drops = [];
//设置画布的宽度和高度
function init(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
colunms = canvas.width/fontSize;
for(var i=0;i<colunms;i++){
drops[i] = 1;
}
draw();
};
function draw(){
context.fillStyle = "rgba(0, 0, 0, 0.05)";
//绘制一个矩形边框
context.fillRect(0,0,canvas.width,canvas.height);
//设置字体颜色
context.fillStyle =randColor();
//context.fillStyle = "#33cc66";
//context.font = (Math.random()*400+400)+" "+(Math.random()*10+10)+"px 宋体";
for(var i=0;i<colunms;i++){ var text = chinese[Math.floor(Math.random() * chinese.length)]; context.fillText(text,i*fontSize,drops[i]*fontSize); if(drops[i]*fontSize > canvas.height && Math.random() > 0.975){
drops[i] = 0;
}
drops[i]++;
}
};
function randColor(){
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb("+r+","+g+","+b+")";
}
init();
var timer = setInterval(draw,30);
window.onresize = function(){
init();
};
};