一招实现“代码雨”的方法
先看看效果
1、绿色：
2、彩色：
3、背景色：
4、绿色逐渐变浅：
源代码：
<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>Code-byZhenYu.Sha</title><styletype="text/css">html,body{width:100%;height:100%;}body{background:#000;overflow:hidden;margin:0;padding:0;}</style></head><body><canvasid="cvs"></canvas><scripttype="text/javascript">varcvs=document.getElementById("cvs");varctx=cvs.getContext("2d");varcw=cvs.width=document.body.clientWidth;varch=cvs.height=document.body.clientHeight;//动画绘制对象varrequestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;varcodeRainArr=[];//代码雨数组varcols=parseInt(cw/14);//代码雨列数varstep=16;//步长，每一列内部数字之间的上下间隔ctx.font="bold26pxmicrosoftyahei";//声明字体，个人喜欢微软雅黑functioncreateColorCv(){//画布基本颜色ctx.fillStyle="#242424";ctx.fillRect(0,0,cw,ch);}//创建代码雨functioncreateCodeRain(){for(varn=0;n<cols;n++){varcol=[];//基础位置，为了列与列之间产生错位varbasePos=parseInt(Math.random()*300);//随机速度3~13之间varspeed=parseInt(Math.random()*10)+3;//每组的x轴位置随机产生varcolx=parseInt(Math.random()*cw)//绿色随机varrgbr=0;varrgbg=parseInt(Math.random()*255);varrgbb=0;//ctx.fillStyle="rgb("+r+','+g+','+b+")"for(vari=0;i<parseInt(ch/step)/2;i++){varcode={x:colx,y:-(step*i)-basePos,speed:speed,//text:parseInt(Math.random()*10)%2==0?0:1//随机生成0或者1text:["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","s","t","u","v","w","x","y","z"][parseInt(Math.random()*11)],//随机生成字母数组中的一个color:"rgb("+rgbr+','+rgbg+','+rgbb+")"}col.push(code);}codeRainArr.push(col);}}//代码雨下起来functioncodeRaining(){//把画布擦干净ctx.clearRect(0,0,cw,ch);//创建有颜色的画布//createColorCv();for(varn=0;n<codeRainArr.length;n++){//取出列col=codeRainArr[n];//遍历列，画出该列的代码for(vari=0;i<col.length;i++){varcode=col[i];if(code.y>ch){//如果超出下边界则重置到顶部code.y=0;}else{//匀速降落code.y+=code.speed;}//1颜色也随机变化//ctx.fillStyle="hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)";//2绿色逐渐变浅//ctx.fillStyle="hsl(123,80%,"+(30-i*2)+"%)";//3绿色随机//varr=0;//varg=parseInt(Math.random()*255)+3;//varb=0;//ctx.fillStyle="rgb("+r+','+g+','+b+")";//4一致绿ctx.fillStyle=code.color;//把代码画出来ctx.fillText(code.text,code.x,code.y);}}requestAnimationFrame(codeRaining);}//创建代码雨createCodeRain();//开始下雨吧GO>>requestAnimationFrame(codeRaining);</script></body></html>