マトリックスのオープニングアニメーション効果をjqueryで実現-jsチュートリアル-php.cn

マトリックスのオープニングアニメーション効果をjqueryで実現

韦小宝

リリース： 2017-11-22 10:56:34

オリジナル

2241 人が閲覧しました

jqueryマトリックスのオープニングアニメーション効果を実感するのはとても楽しいですjqueryに興味のある友達はそれを深く学ぶことができ、私たちもjquery~

マトリックスのオープニングアニメーション効果をjqueryで実現を学ぶのに役立ちます。

コードの実装 :

<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(&#39;&#39;);
                var ctx = q.getContext(&#39;2d&#39;);
               var draw = function() {
                        ctx.fillStyle = &#39;rgba(0,0,0,.05)&#39;;
                        ctx.fillRect(0, 0, width, height);
                        ctx.fillStyle = &#39;green&#39;;/*代码颜色*/
                        ctx.font = &#39;10pt Georgia&#39;;
                        yPositions.map(function(y, index) {
                                text = String.fromCharCode(1e2 + Math.random() * 330);
                                x = (index * 10) + 10;
                                q.getContext(&#39;2d&#39;).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>