实现一下黑客帝国代码雨

<a href="" download="dmy" id="aaa"><canvas id="myCanvas" id="canvas"><img src="" alt="" id="img"></canvas></a>
    <script>
        //获取屏幕的宽度，使画布的宽度和屏幕宽度一致
        var width = document.getElementById("myCanvas").width = screen.availWidth;
        console.log(screen.availHeight)
        //获取屏幕高度，使画布高度和屏幕宽度一致
        var height = document.getElementById("myCanvas").height = screen.availHeight;
        // 画笔
        var ctx = document.getElementById("myCanvas").getContext("2d");
        // 定义一个数组，往里面填充（画布宽度/10）个零
        var arr = Array(Math.ceil(width / 10)).fill(0);
        // 还可以用这种方法写
        // var arr = [];
        // for (var i = 0; i < Math.ceil(width / 10); i++) {
        //     arr.push(0);
        // }
        // console.log(arr)
        //字符串用split分割成数组
        var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");
        // console.log(str)
        //自定义一个函数
        function rain() {
            // 0.5的透明度，为了制造多层雨滴的时候更有科技感
            //这个时候画布是透明的，每一层画布透明度百分之五十，每重新画一次
            //画布就会覆盖下面一层画布，形成雨滴逐渐消失的感觉
            ctx.fillStyle = "rgba(0,0,0,0.05)";
            // 把整个画布填充满
            ctx.fillRect(0, 0, width, height);
            // 字体颜色
            ctx.fillStyle = "#0f0";
            //遍历数组
            arr.forEach(function(value, index) {
                //遍历数组  value是值，index是下标，下标对应的值
                // 第一个值是随机取到的字符
                // 第二个值是下标，也就是列数，乘以10，是因为每一个
                //第三个值是下标对应的值
                // 下标乘以10是控制每一列的距离 这是针对x轴的
                ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
                
                // 每次水平方向画width/10个，每隔一次，在原本的位置往下面第十个像素，开始画
                // 判断其中一类的值是否大于屏幕的高度，如果大于那么，让他从零开始重新画；
                // 如果不大于屏幕的高度，那么就随机一列满足条件的话从头开始画
                arr[index] = value >= height || value > height *10 *Math.random() ? 0 : value + 10;
                // 其实还可以这么写
                // if (value >= height) {
                //     arr[index] = 0;
                // } else if (Math.random() < 0.05) {
                //     arr[index] = 0;
                // } else {
                //     arr[index] = value + 10;
                // }
            });
        }
        // 计时器
        setInterval(rain, 30);
        //这是canvas发布的一个新的使用方式，便于我们把画布转换成图片格式
        var canvas = document.getElementById("myCanvas")
        canvas.onclick = function() {
            // 先拿到a标签
            var svaeHref = document.getElementById("aaa");
            /*
             * 传入对应想要保存的图片格式的mime类型
             * 常见：image/png，image/gif,image/jpg,image/jpeg
             */
            // 然后拿到a标签中的img标签
            var img = document.getElementById("img");
            // 然后把图片用png形式输出，保存到一个变量里面
            var tempSrc = canvas.toDataURL('image/png');
            //我们使a标签的href=这个变量
            svaeHref.href = tempSrc;
            //然后把img的src=这个变量
            img.src = tempSrc
        }