教你一招实现“代码雨”-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

教你一招实现“代码雨”

本篇文章介绍一下如何实现“代码雨”。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

先看看效果

1、绿色：

2、彩色：

3、背景色：

4、绿色逐渐变浅：

源代码：

<!DOCTYPE html><html>   <head>       <meta http-equiv="Content-Type" content="text/html;charset=utf-8">    <title>Code -by ZhenYu.Sha</title>    <style type="text/css">        html, body {            width: 100%;            height: 100%;        }        body {            background: #000;            overflow: hidden;            margin: 0;            padding: 0;        }    </style></head>   <body>  <canvas id="cvs"></canvas><script type="text/javascript">    var cvs = document.getElementById("cvs");    var ctx = cvs.getContext("2d");    var cw = cvs.width = document.body.clientWidth;    var ch = cvs.height = document.body.clientHeight;    //动画绘制对象    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;    var codeRainArr = []; //代码雨数组    var cols = parseInt(cw / 14); //代码雨列数    var step = 16;    //步长，每一列内部数字之间的上下间隔    ctx.font = "bold 26px microsoft yahei"; //声明字体，个人喜欢微软雅黑    function createColorCv() {        //画布基本颜色        ctx.fillStyle = "#242424";        ctx.fillRect(0, 0, cw, ch);    }    //创建代码雨    function createCodeRain() {        for (var n = 0; n < cols; n++) {            var col = [];            //基础位置，为了列与列之间产生错位            var basePos = parseInt(Math.random() * 300);            //随机速度 3~13之间            var speed = parseInt(Math.random() * 10) + 3;            //每组的x轴位置随机产生            var colx = parseInt(Math.random() * cw)            //绿色随机            var rgbr = 0;            var rgbg = parseInt(Math.random() * 255);            var rgbb = 0;            //ctx.fillStyle = "rgb("+r+','+g+','+b+")"            for (var i = 0; i < parseInt(ch / step) / 2; i++) {                var code = {                    x: colx,                    y: -(step * i) - basePos,                    speed: speed,                    //  text : parseInt(Math.random()*10)%2 == 0 ? 0 : 1  //随机生成0或者1                    text: ["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);        }    }    //代码雨下起来    function codeRaining() {        //把画布擦干净        ctx.clearRect(0, 0, cw, ch);        //创建有颜色的画布        //createColorCv();        for (var n = 0; n < codeRainArr.length; n++) {            //取出列            col = codeRainArr[n];            //遍历列，画出该列的代码            for (var i = 0; i < col.length; i++) {                var code = 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 绿色随机                // var r= 0;                // var g= parseInt(Math.random()*255) + 3;                // var b= 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>

登录后复制

【推荐学习：html视频教程】

以上就是教你一招实现“代码雨”的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~