教你一招实现“代码雨”

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

先看看效果

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视频教程】

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！