使用canvas制作炫酷黑客帝国数字雨背景html+css+js

目录

• 制作：
• 1.定义canvas标签：
• 2.开始js部分，先定义变量：
• 3.初始化字符串数组，先给每条字符串位置，字符先不给：
• 4.绘制每条字符串：
• 5.更新字符串：
• 6.设置动画过程：
• 7.在窗口大小改变时，设置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 
 

完整代码：

    
    
    
    
    


    
北极光之夜。
    
    

到此这篇关于使用canvas制作炫酷黑客帝国数字雨背景html+css+js的文章就介绍到这了,更多相关canvas制作数字雨背景特效html+css+js内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！