如何用JS实现代码雨特效

这篇"如何用JS实现代码雨特效"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"如何用JS实现代码雨特效"文章吧。

html代码

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 = Math.floor(W / fontSize);         //记录每列文字的y轴坐标         var drops = [];         //给每一个文字初始化一个起始点的位置         for (var i = 0; i < colunms; i++) {             drops.push(0);         }         //运动的文字         var 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"][parseInt(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.random() > 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);             return "rgb(" + r + "," + g + "," + b + ")";         }         draw();         setInterval(draw, 35);     };

展示效果：

以上就是关于"如何用JS实现代码雨特效"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。