怎么使用canvas制作炫酷黑客帝国数字雨背景

制作：

1.定义canvas标签：

2.开始js部分，先定义变量：

         /* 获取画布 */
        var canvas = document.querySelector("#canvas");
        var ctx = canvas.getContext('2d');
        /* 定义一个字符串数组，后面字符串会从里随机选值 */
        var text = "SAFAF1D56FLK43F7PHM76VC9XNJL23";
        /* 定义 w为窗口宽度，h为窗体高度 */
        var w=window.innerWidth;
        var h=window.innerHeight;
        /* 设置len为20，其为背景里每条字符串的长度 */
        var len = 20;
        /* 设置num为100，窗口一共显示100条字符串 */
        var num = 100;
        /* 定义数组，里面存取每条字符串的字符与位置 */
        var arr=[];
        /* 画布宽等于窗口宽 */
        canvas.width=window.innerWidth;
        /* 画布高等于窗口高 */
        canvas.height=window.innerHeight;

3.初始化字符串数组，先给每条字符串位置，字符先不给：

 /* 初始化字符串数组 */
         for(let i=0;i
4.绘制每条字符串：
 /* 绘制每条字符串 */
        function txt(){
            /* 给个循环，共绘制num条 */
            for(let i=0;i
5.更新字符串：
 /* 让字符串移动，若某字符串出了可视区，则重新生成 */
        function move(){
            /* 来个循环，给全部字符串更新位置 */
            for(let j=0;j=h){
                    arr[j]={
                        str:[],
                 x: parseInt(w*Math.random()),
                 y: parseInt(h*Math.random()-150)
                    }
                }
            }
        }
6.设置动画过程：
 setInterval(function(){
             /* 清屏 */
            ctx.clearRect(0,0,w,h);
            /* 渲染 */
            move();
            /* 更新 */
            txt();
         },50);
7.在窗口大小改变时，设置canvas画布能实时铺满屏幕：
/* 绑定窗口大小发生改变事件，重新绘制字符串数组，让canvas随时铺满浏览器可视区 */
        window.onresize=resizeCanvas;
        function resizeCanvas(){
            w=canvas.width=window.innerWidth;
            h=canvas.height=window.innerHeight;
            /* 重新给全部字符串赋值 */
            for(let j=0;j
完整代码：



    
    
    
    
    


    
北极光之夜。