黑客帝国开头动画

发布网友发布时间：2022-04-23 13:07

共4个回答

懂视网时间：2022-04-23 17:28

jquery实现黑客帝国的片头动画效果，感觉挺好玩的，对jquery感兴趣的朋友可以深度研究一下，对我们学习jquery也是一种帮助~

J%1N[(ZLXU~ZV_}F~UCP`LD.png

代码实现：

 <html>
 <head>
 <title>PHP中文网</title>
 <meta charset="utf-8">
 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
 <script>
 /*
 11 ① 用setInterval(draw, 33)设定刷新间隔
 12
 13 ② 用String.fromCharCode(1e2+Math.random()*33)随机生成字母
 14
 15 ③ 用ctx.fillStyle=’rgba(0,0,0,.05)’; ctx.fillRect(0,0,width,height); ctx.fillStyle=’#0F0′; 反复生成opacity为0.5的半透明黑色背景
 16
 17 ④ 用x = (index * 10)+10;和yPositions[index] = y + 10;顺序确定显示字母的位置
 18
 19 ⑤ 用fillText(text, x, y); 在指定位置显示一个字母 以上步骤循环进行，就会产生《黑客帝国》的片头效果。
 20 */
  $(document).ready(function() {
  //设备宽度
  var s = window.screen;
   var width = q.width = s.width;
  var height = q.height;
  var yPositions = Array(300).join(0).split('');
   var ctx = q.getContext('2d');
  var draw = function() {
    ctx.fillStyle = 'rgba(0,0,0,.05)';
    ctx.fillRect(0, 0, width, height);
    ctx.fillStyle = 'green';/*代码颜色*/
    ctx.font = '10pt Georgia';
    yPositions.map(function(y, index) {
     text = String.fromCharCode(1e2 + Math.random() * 330);
     x = (index * 10) + 10;
     q.getContext('2d').fillText(text, x, y);
     if (y > Math.random() * 1e4) {
     yPositions[index] = 0;
     } else {
     yPositions[index] = y + 10;
     }
    });
   };
  RunMatrix();
  function RunMatrix() {
   Game_Interval = setInterval(draw,30);
   }
  });
 </script>
 </head>
 <body>
 <div align="center" style=" position:fixed; left:0; top:0px; width:100%; height:100%;">
  <canvas id="q" width="1440" height="900"></canvas>
 </div>
 </body>
 </html>

以上是jquery实现黑客帝国的片头动画效果所有源码，感兴趣的同学们可以到PHP中文网搜索更多相关内容哦！