Canvas实现黑客帝国文字坠落效果

//定义一个Canvas【相当于画布】
<canvas id="canvas">canvascanvas>
  //背景音乐
    <embed height="100" width="100" src="#"/>

    <script type="text/javascript">

            //获取canvas的上下文
            var canvas = document.getElementById("canvas"),
              ctx = canvas.getContext("2d");
            setSize();
            var txt = "傻媳妇你今天在干嘛";
            var arr = txt.split("");
            var font_size = 16;
            var column  = Math.floor(canvas.width/font_size);
            var drop = [];
            for(let i = 0;i1;
            }

            init();
            //初始化
            function  init() {
                setSize();
                setInterval(draw,50)
            }
            //输入文字
            function  draw() {
                ctx.fillStyle = "rgba(0,0,0,0.05)";
                ctx.fillRect(0,0,canvas.width,canvas.height);

                ctx.fillStyle = "#0f0";//文字颜色
                ctx.font = font_size +"px arial";
                //逐行输出文字、
                for (var i = 0 ;i//随机输出文字
                    var text = arr[Math.floor(Math.random()*arr.length)];
                                 //输出文字,重新计算坐标
                    ctx.fillText(text,i*font_size,drop[i]*font_size);

                    if(drop[i]*font_size >canvas.height || Math.random()>0.9){
                        drop[i] =0;
                    }
                    drop[i]++;
                }
            }
            //重新计算画布大小
            window.onresize = function () {
                setSize();
            }
            //设置画布大小
            function setSize() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }

    script>

附上效果图