JS实现代码雨特效

本文实例为大家分享了js实现代码雨特效的具体代码，供大家参考，具体内容如下

html代码

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

js 代码

window.onload = function() {    //获取画布对象    var canvas = document.getelementbyid("code_rain_canvas");    //获取画布的上下文    var context = canvas.getcontext("2d");    var s = window.screen;    var w = canvas.width = s.width;    var h = canvas.height;    //获取浏览器屏幕的宽度和高度    //var w = window.innerwidth;    //var h = window.innerheight;    //设置canvas的宽度和高度    canvas.width = w;    canvas.height = h;    //每个文字的字体大小    var fontsize = 12;    //计算列    var colunms = m冬季补水面膜排行榜ath.floor(w / fontsize);    //记录每列文字的y轴坐标    var drops = [];    //给每一个文字初始化一个起始点的位置    for (var i = 0; i < colunms; i++) {      drops.push(0);    }    //运动的文字    va世界气象日主题r str = "welcome to www.itrhx.com";    //4:filltext(str,x,y);原理就是去更改y的坐标位置    //绘画的函数    function draw() {      context.fillstyle = "rgba(238,238,238,.08)"; //遮盖层      context.fillrect(0, 0, w, h);      //给字体设置样式      context.font = "600 " + fontsize + "px georgia";      //给字体添加颜色      context.fillstyle = ["#33b5e5", "#0099cc", "#aa66cc", "#9933cc", "#99cc00", "#669900", "#ffbb33", "#ff8800", "#ff4444", "#cc0000"][parint(math.random() * 10)]; //randcolor();可以rgb,hsl, 标准色，十六进制颜色      //写入画布中      for (var i = 0; i < colunms; i++) {        var index = math.floor(math.random() * str.length);        var x = 辞的意思i * fontsize;        var y = drops[i] * fontsize;        context.filltext(str[index], x, y);        //如果要改变时间，肯定就是改变每次他的起点        if (y >= canvas.height && math.rand冰糖炖雪梨肉章节om() > 0.99) {          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);      retur猜成语大全n "rgb(" + r + "," + g + "," + b + ")";    }    draw();    tinterval(draw, 35);  };

展示效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。