1293

偶然看到一个《黑客帝国》片头效果的代码,就扒过来了,留作备忘!

演示页面:点击预览

代码:

<html>
<head>
<title>The Matrix</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<script src="http://www.ahutcloud.cn/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>

转载原创文章请注明,转载自: 酌金樽化清风 » 《黑客帝国》的片头效果-数据流

留言

Loading...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

  1. 你不是真正的快乐 五月天 5:00
  2. Chris Medina - What Are Words 3:08
  3. Carry Me Home SOHN 4:09
  4. Right Here Waiting 李玖哲 4:22