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

2023-07-05 18:07:31 106人浏览安东尼

摘要

今天小编给大家分享一下怎么使用canvas制作炫酷黑客帝国数字雨背景的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。制作：1.

今天小编给大家分享一下怎么使用canvas制作炫酷黑客帝国数字雨背景的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

制作：

1.定义canvas标签：

<canvas id="canvas"></canvas>

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

                 var canvas = document.querySelector("#canvas");        var ctx = canvas.getContext('2d');                var text = "SAFAF1D56FLK43F7PHM76VC9XNJL23";                var w=window.innerWidth;        var h=window.innerHeight;                var len = 20;                var num = 100;                var arr=[];                canvas.width=window.innerWidth;                canvas.height=window.innerHeight;

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

          for(let i=0;i<num;i++){                          arr.push({                                  str:[],                                  x: parseInt(w*Math.random()),                                  y: parseInt(h*Math.random()-150)             })         }

4.绘制每条字符串：

         function txt(){                        for(let i=0;i<num;i++){                                var letter = arr[i];                                letter.str = [];                                for(let k=0;k<len;k++){                                        letter.str.push(text[Math.floor(Math.random() * text.length)]);                }                                for(let j=0;j<len;j++){                    if(j==len-1){                                                ctx.fillStyle = `rgb(255, 255, 255)`;                    }else{                                                ctx.fillStyle = `rgba(0, 255, 21,${j*0.15})`;                    }                                              ctx.font = "20px FangSong";                     ctx.fillText(letter.str[j],letter.x,letter.y+j*15);                }            }                        move();        }

5.更新字符串：

         function move(){                        for(let j=0;j<num;j++){                                arr[j].y=arr[j].y+3;                                if(arr[j].y>=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画布能实时铺满屏幕：

        window.onresize=resizeCanvas;        function resizeCanvas(){            w=canvas.width=window.innerWidth;            h=canvas.height=window.innerHeight;                        for(let j=0;j<num;j++){                    arr[j]={                        str:[],                 x: parseInt(w*Math.random()),                 y: parseInt(h*Math.random()-150)                    }                }            }               resizeCanvas();

完整代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta Http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        *{            margin: 0;            padding: 0;            box-sizing: border-box;        }        body{            height: 100vh;            background-color: rgb(0, 0, 0);        }        canvas{            position: fixed;            top: 0;            left: 0;            z-index: -1;        }        h2{             font-family: 'FangSong';            position: fixed;            top: 50%;            left: 50%;            transfORM: translate(-40%,-50%);            font-size: 3em;            color: rgb(255, 255, 255);            text-shadow: 0 0 10px rgb(30, 255, 0),            0 0 20px rgb(30, 255, 0),            0 0 30px rgb(30, 255, 0),            0 0 50px rgb(30, 255, 0);        }    </style></head><body>    <h2>北极光之夜。</h2>    <canvas id="canvas"></canvas>    <script>                var canvas = document.querySelector("#canvas");        var ctx = canvas.getContext('2d');                var text = "SAFAF1D56FLK43F7PHM76VC9XNJL23";                var w=window.innerWidth;        var h=window.innerHeight;                var len = 20;                var num = 100;                var arr=[];                canvas.width=window.innerWidth;                canvas.height=window.innerHeight;                window.onresize=resizeCanvas;        function resizeCanvas(){            w=canvas.width=window.innerWidth;            h=canvas.height=window.innerHeight;                        for(let j=0;j<num;j++){                    arr[j]={                        str:[],                 x: parseInt(w*Math.random()),                 y: parseInt(h*Math.random()-150)                    }                }            }               resizeCanvas();                  for(let i=0;i<num;i++){                          arr.push({                                  str:[],                                  x: parseInt(w*Math.random()),                                  y: parseInt(h*Math.random()-150)             })         }                function txt(){                        for(let i=0;i<num;i++){                                var letter = arr[i];                                letter.str = [];                                for(let k=0;k<len;k++){                                        letter.str.push(text[Math.floor(Math.random() * text.length)]);                }                                for(let j=0;j<len;j++){                    if(j==len-1){                                                ctx.fillStyle = `rgb(255, 255, 255)`;                    }else{                                                ctx.fillStyle = `rgba(0, 255, 21,${j*0.15})`;                    }                                              ctx.font = "20px FangSong";                     ctx.fillText(letter.str[j],letter.x,letter.y+j*15);                }            }                        move();        }                         function move(){                        for(let j=0;j<num;j++){                                arr[j].y=arr[j].y+3;                                if(arr[j].y>=h){                    arr[j]={                        str:[],                 x: parseInt(w*Math.random()),                 y: parseInt(h*Math.random()-150)                    }                }            }        }         setInterval(function(){                         ctx.clearRect(0,0,w,h);                        move();                        txt();         },50);     </script></body></html>

以上就是“怎么使用canvas制作炫酷黑客帝国数字雨背景”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。

--结束END--

本文标题: 怎么使用canvas制作炫酷黑客帝国数字雨背景

本文链接: https://lsjlt.com/news/354010.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341