代码雨

CSS：
<style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            overflow: hidden;
        }
    </style>
body：
 <canvas id="canvas" style="background-color: #111111;"></canvas>

    <script>
        // 获取画布对象
        var canvas = document.querySelector('canvas');
        // 获去画布上下文
        var cxt = canvas.getContext('2d');
        // 获取浏览器窗口的宽度或者高度
        var W = window.innerWidth;
        var H = window.innerHeight;
        // 设置canvas的宽高
        canvas.width = W;
        canvas.height = H;
        // 设置字体大小
        var fontSize = 16;
        // 计算窗口可以排放的列
        var colums = Math.floor(W / fontSize);
        // 记录文字坐标
        var drop = [];
        // 给每一字文字一个初始起点的位置
        for (var i = 0; i < colums; i++) {
            drop.push(0);
        }
        console.log(drop);
        
        // 设置代码雨的运行轨迹
        var str = 'dfsgwehfhjfwtwwtwgfgwtwr2rwfefswgwtwt';

        // 绘画的函数
        function draw(){
            cxt.beginPath();
            cxt.fillStyle = "rgba(0,0,0,0,05)";
            cxt.fillRect(0,0,W,H);
            cxt.beginPath();
            cxt.font = fontSize + 'px + 微软雅黑';
            cxt.fillStyle = '#22ff22';

            for (var i = 0; i < colums; i++) {
                var index = Math.floor(Math.random()*str.leng);
                var x = i*fontSize;
                var y = drop[i]*fontSize;
                console.log('x:' + x + '......' + 'y:' + y);
                cxt.fillText(str[index],x,y);
                // 改变时间，就要改变每一次的起点
                if (y >= canvas.height && Math.random() > 0.99) {
                    drop[i] = 0;
                }
                drop[i]++;
                
            }
        };

        draw();
        setInterval(draw30);