开发前端软件素材源码教程下载网站

全部
网站模板
网页特效
网站源码
素材资源
建站学院
软件工具
mysql mysql 微信 微信 小程序 苹果 dedecms 修真图
当前位置：首页 > 建站学院 > 其他教程 >  怎么使用canvas制作炫酷黑客帝国数字雨背景

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

其他教程   发布日期：2024年05月14日   浏览次数：290次

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

制作：

1.定义canvas标签：

  1. <canvas id="canvas"></canvas>

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

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

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

  1.  /* 初始化字符串数组 */
  2.          for(let i=0;i<num;i++){
  3.              /* 用.push方法给arr数组添加值 */
  4.              arr.push({
  5.                  /* 字符先为空 */
  6.                  str:[],
  7.                  /* x轴位置为窗口宽度乘上一个0带1的随机数 */
  8.                  x: parseInt(w*Math.random()),
  9.                  /* y轴位置为窗口高度乘上一个0带1的随机数，再减个150把，可以为负数 */
  10.                  y: parseInt(h*Math.random()-150)
  11.              })
  12.          }

4.绘制每条字符串：

  1.  /* 绘制每条字符串 */
  2.         function txt(){
  3.             /* 给个循环，共绘制num条 */
  4.             for(let i=0;i<num;i++){
  5.                 /* 设置变量letter为当前arr数组里的第i条字符串 */
  6.                 var letter = arr[i];
  7.                 /* 让字符串的字符为空 */
  8.                 letter.str = [];
  9.                 /* 给个循环，一个字符一个字符的拼接成字符串 */
  10.                 for(let k=0;k<len;k++){
  11.                     /* 随机选取text里的一个字符 */
  12.                     letter.str.push(text[Math.floor(Math.random() * text.length)]);
  13.                 }
  14.                 /* 再来循环，开始绘制渲染字符串的每个字符 */
  15.                 for(let j=0;j<len;j++){
  16.                     if(j==len-1){
  17.                         /* 第一个字符为白色 */
  18.                         ctx.fillStyle = `rgb(255, 255, 255)`;
  19.                     }else{
  20.                         /* 后面的为绿色，慢慢变不透明 */
  21.                         ctx.fillStyle = `rgba(0, 255, 21,${j*0.15})`;
  22.                     } 
  23.                         /* 渲染字符 */
  24.                      ctx.font = "20px FangSong";
  25.                      ctx.fillText(letter.str[j],letter.x,letter.y+j*15);
  26.                 }
  27.             }
  28.             /* 调用更新 */
  29.             move();
  30.         }

5.更新字符串：

  1.  /* 让字符串移动，若某字符串出了可视区，则重新生成 */
  2.         function move(){
  3.             /* 来个循环，给全部字符串更新位置 */
  4.             for(let j=0;j<num;j++){
  5.                 /* y轴位置加3 */
  6.                 arr[j].y=arr[j].y+3;
  7.                 /* 如果改字符已经走出窗口了重新赋值 */
  8.                 if(arr[j].y>=h){
  9.                     arr[j]={
  10.                         str:[],
  11.                  x: parseInt(w*Math.random()),
  12.                  y: parseInt(h*Math.random()-150)
  13.                     }
  14.                 }
  15.             }
  16.         }

6.设置动画过程：

  1.  setInterval(function(){
  2.              /* 清屏 */
  3.             ctx.clearRect(0,0,w,h);
  4.             /* 渲染 */
  5.             move();
  6.             /* 更新 */
  7.             txt();
  8.          },50);

7.在窗口大小改变时，设置canvas画布能实时铺满屏幕：

  1. /* 绑定窗口大小发生改变事件，重新绘制字符串数组，让canvas随时铺满浏览器可视区 */
  2.         window.onresize=resizeCanvas;
  3.         function resizeCanvas(){
  4.             w=canvas.width=window.innerWidth;
  5.             h=canvas.height=window.innerHeight;
  6.             /* 重新给全部字符串赋值 */
  7.             for(let j=0;j<num;j++){
  8.                     arr[j]={
  9.                         str:[],
  10.                  x: parseInt(w*Math.random()),
  11.                  y: parseInt(h*Math.random()-150)
  12.                     }
  13.                 }
  14.             }       
  15.         resizeCanvas();

完整代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         body{
  15.             height: 100vh;
  16.             background-color: rgb(0, 0, 0);
  17.         }
  18.         canvas{
  19.             position: fixed;
  20.             top: 0;
  21.             left: 0;
  22.             z-index: -1;
  23.         }
  24.         h2{ 
  25.             font-family: 'FangSong';
  26.             position: fixed;
  27.             top: 50%;
  28.             left: 50%;
  29.             transform: translate(-40%,-50%);
  30.             font-size: 3em;
  31.             color: rgb(255, 255, 255);
  32.             text-shadow: 0 0 10px rgb(30, 255, 0),
  33.             0 0 20px rgb(30, 255, 0),
  34.             0 0 30px rgb(30, 255, 0),
  35.             0 0 50px rgb(30, 255, 0);
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <h2>北极光之夜。</h2>
  41.     <canvas id="canvas"></canvas>
  42.     <script>
  43.         /* 获取画布 */
  44.         var canvas = document.querySelector("#canvas");
  45.         var ctx = canvas.getContext('2d');
  46.         /* 定义一个字符串数组，后面字符串会从里随机选值 */
  47.         var text = "SAFAF1D56FLK43F7PHM76VC9XNJL23";
  48.         /* 定义 w为窗口宽度，h为窗体高度 */
  49.         var w=window.innerWidth;
  50.         var h=window.innerHeight;
  51.         /* 设置len为20，其为背景里每条字符串的长度 */
  52.         var len = 20;
  53.         /* 设置num为100，窗口一共显示100条字符串 */
  54.         var num = 100;
  55.         /* 定义数组，里面存取每条字符串的字符与位置 */
  56.         var arr=[];
  57.         /* 画布宽等于窗口宽 */
  58.         canvas.width=window.innerWidth;
  59.         /* 画布高等于窗口高 */
  60.         canvas.height=window.innerHeight;
  61.         /* 绑定窗口大小发生改变事件，重新绘制字符串数组，让canvas随时铺满浏览器可视区 */
  62.         window.onresize=resizeCanvas;
  63.         function resizeCanvas(){
  64.             w=canvas.width=window.innerWidth;
  65.             h=canvas.height=window.innerHeight;
  66.             /* 重新给全部字符串赋值 */
  67.             for(let j=0;j<num;j++){
  68.                     arr[j]={
  69.                         str:[],
  70.                  x: parseInt(w*Math.random()),
  71.                  y: parseInt(h*Math.random()-150)
  72.                     }
  73.                 }
  74.             }       
  75.         resizeCanvas();
  76.          /* 初始化字符串数组 */
  77.          for(let i=0;i<num;i++){
  78.              /* 用.push方法给arr数组添加值 */
  79.              arr.push({
  80.                  /* 字符先为空 */
  81.                  str:[],
  82.                  /* x轴位置为窗口宽度乘上一个0带1的随机数 */
  83.                  x: parseInt(w*Math.random()),
  84.                  /* y轴位置为窗口高度乘上一个0带1的随机数，再减个150把，可以为负数 */
  85.                  y: parseInt(h*Math.random()-150)
  86.              })
  87.          }
  89.         /* 绘制每条字符串 */
  90.         function txt(){
  91.             /* 给个循环，共绘制num条 */
  92.             for(let i=0;i<num;i++){
  93.                 /* 设置变量letter为当前arr数组里的第i条字符串 */
  94.                 var letter = arr[i];
  95.                 /* 让字符串的字符为空 */
  96.                 letter.str = [];
  97.                 /* 给个循环，一个字符一个字符的拼接成字符串 */
  98.                 for(let k=0;k<len;k++){
  99.                     /* 随机选取text里的一个字符 */
  100.                     letter.str.push(text[Math.floor(Math.random() * text.length)]);
  101.                 }
  102.                 /* 再来循环，开始绘制渲染字符串的每个字符 */
  103.                 for(let j=0;j<len;j++){
  104.                     if(j==len-1){
  105.                         /* 第一个字符为白色 */
  106.                         ctx.fillStyle = `rgb(255, 255, 255)`;
  107.                     }else{
  108.                         /* 后面的为绿色，慢慢变不透明 */
  109.                         ctx.fillStyle = `rgba(0, 255, 21,${j*0.15})`;
  110.                     } 
  111.                         /* 渲染字符 */
  112.                      ctx.font = "20px FangSong";
  113.                      ctx.fillText(letter.str[j],letter.x,letter.y+j*15);
  114.                 }
  115.             }
  116.             /* 调用更新 */
  117.             move();
  118.         }
  119.          
  120.         /* 让字符串移动，若某字符串出了可视区，则重新生成 */
  121.         function move(){
  122.             /* 来个循环，给全部字符串更新位置 */
  123.             for(let j=0;j<num;j++){
  124.                 /* y轴位置加3 */
  125.                 arr[j].y=arr[j].y+3;
  126.                 /* 如果改字符已经走出窗口了重新赋值 */
  127.                 if(arr[j].y>=h){
  128.                     arr[j]={
  129.                         str:[],
  130.                  x: parseInt(w*Math.random()),
  131.                  y: parseInt(h*Math.random()-150)
  132.                     }
  133.                 }
  134.             }
  135.         }
  137.          setInterval(function(){
  138.              /* 清屏 */
  139.             ctx.clearRect(0,0,w,h);
  140.             /* 渲染 */
  141.             move();
  142.             /* 更新 */
  143.             txt();
  144.          },50); 
  146.     </script>
  147. </body>
  148. </html>

以上就是怎么使用canvas制作炫酷黑客帝国数字雨背景的详细内容，更多关于怎么使用canvas制作炫酷黑客帝国数字雨背景的资料请关注九品源码其它相关文章！

相关热词： 使用canvas制作黑客帝国数字背景
上一篇：讲一讲如何在一个页面中使用多个百度分享按钮，分享不同的文章
下一篇：vue3怎么获取url地址参数

文章分类

IT资讯 CMS教程 服务器 数据库 前端开发 后端开发 工具使用 其他教程

最后更新

热门排行

网站首页 | 关于我们 | 免责声明 | 网站建设 | 在线工具 | 网站地图

版权声明：本站发布的资源部分自互联网，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

Copyright 2018-2025 ©19jp.com All Rights Reserved. 陕ICP备16002142号-1