如何用JS实现代码雨特效(JS,开发技术)

html代码

<canvasid="code_rain_canvas"width="1440"height="900"></canvas>

js 代码

window.onload=function(){//获取画布对象varcanvas=document.getElementById("code_rain_canvas");//获取画布的上下文varcontext=canvas.getContext("2d");vars=window.screen;varW=canvas.width=s.width;varH=canvas.height;//获取浏览器屏幕的宽度和高度//varW=window.innerWidth;//varH=window.innerHeight;//设置canvas的宽度和高度canvas.width=W;canvas.height=H;//每个文字的字体大小varfontSize=12;//计算列varcolunms=Math.floor(W/fontSize);//记录每列文字的y轴坐标vardrops=[];//给每一个文字初始化一个起始点的位置for(vari=0;i<colunms;i++){drops.push(0);}//运动的文字varstr="WELCOMETOWWW.ITRHX.COM";//4:fillText(str,x,y);原理就是去更改y的坐标位置//绘画的函数functiondraw(){context.fillStyle="rgba(238,238,238,.08)";//遮盖层context.fillRect(0,0,W,H);//给字体设置样式context.font="600"+fontSize+"pxGeorgia";//给字体添加颜色context.fillStyle=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"][parseInt(Math.random()*10)];//randColor();可以rgb,hsl,标准色，十六进制颜色//写入画布中for(vari=0;i<colunms;i++){varindex=Math.floor(Math.random()*str.length);varx=i*fontSize;vary=drops[i]*fontSize;context.fillText(str[index],x,y);//如果要改变时间，肯定就是改变每次他的起点if(y>=canvas.height&&Math.random()>0.99){drops[i]=0;}drops[i]++;}};functionrandColor(){//随机颜色varr=Math.floor(Math.random()*256);varg=Math.floor(Math.random()*256);varb=Math.floor(Math.random()*256);return"rgb("+r+","+g+","+b+")";}draw();setInterval(draw,35);};

展示效果：