canvas绘图——代码雨

最新推荐文章于 2024-08-05 17:06:14 发布

秃头的毛睿

最新推荐文章于 2024-08-05 17:06:14 发布

阅读量334

点赞数

本文链接：https://blog.csdn.net/weixin_45927758/article/details/109107567

版权

<!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 createCodeRain() {
        //创建所有代码雨
        for (var n = 0; n < cols; n++) {
            //这个是存放每一个代码条每一个字母属性的数组
            var col = [];
            //基础位置，为了列与列之间产生错位，可以理解为起跑线不同
            var basePos = parseInt(Math.random() * 300);
            
            //随机速度 3~13之间
            var speed = parseInt(Math.random() * 10) + 10;
            //每组的x轴位置随机产生
            var colx = parseInt(Math.random() * cw)
            
            
            //绿色随机
            //以下三个变量是rgb颜色变量
            var rgbr = 0;
            var rgbg = parseInt(Math.random() * 255);
            var rgbb = 0;
            
            for (var i = 0; i < parseInt(ch / step) / 2; i++) {
                var code = {
                    x: colx,
                    y: -(step * i) - basePos,/*这里是负数我大概可以理解了，就是为了让每一串代码是从页面外面流进来的*/
                    speed: speed,
                    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() * 23)], //随机生成字母数组中的一个
                    color: "rgb(" + rgbr + ',' + rgbg + ',' + rgbb + ")"
                }
                col.push(code);
            }
            //这里是存放代码条的数组
            codeRainArr.push(col);
        }
    }
    //代码雨下起来
    function codeRaining() {
        //把画布擦干净
        ctx.clearRect(0, 0, cw, ch);

        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;
                }

                ctx.fillStyle = code.color;
                //把代码画出来
                ctx.fillText(code.text, code.x, code.y);
            }
        }
        //递归调用，这样就可以一直重绘页面了
        requestAnimationFrame(codeRaining);
}
    //创建代码雨
    createCodeRain();
    //开始下雨吧 GO>>
    requestAnimationFrame(codeRaining);
</script>
</body>

</html>

1.CSS设置黑色背景

2.整体的代码滚动效果是使用一个动画绘制函数完成的，此函数接受一个函数参数用来在页面重新加载之前调用这个函数

 var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

这样调用是为了兼容

3. 代码雨的实现使用的是cannvas标签并在画板上使用fillText绘制文本，以及随机函数来形成初始位置的落差，运动速度的落差，不同的列

4.在下雨函数中递归的调用绘图函数就会出现页面所显示的滚动效果了

5.不同深浅的代码颜色是使用rgb来控制，随机函数来控制rgb的值，就可以形成深色的代码和浅色的代码了

6.至于每一条代码雨中的字母的初始纵坐标是负的是为了让代码是从顶部流出来的，最下面最先出来