• 技术文章 >web前端 >html教程

    教你一招实现“代码雨”

    醉折花枝作酒筹醉折花枝作酒筹2021-04-09 11:51:01转载414

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

    先看看效果

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

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

    声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除
    专题推荐:html js
    上一篇:html无法播放视频怎么办 下一篇:html怎么去掉空格
    第15期线上培训班

    相关文章推荐

    • html是什么的缩写• html图片怎么居中• html怎么设置表格高度• css在html中三种实现方式是什么• 如何利用传统的方式在HTML中获取DOM元素

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网