JS 4つの楽しいハッカー背景効果コードを共有する

例1

<html>
<ヘッド>
    <title>マトリックス</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
            </script> ...
    <メタ文字セット="utf-8">
    <スクリプト>
        /*
            ①setInterval(draw, 33)で更新間隔を設定する ②String.fromCharCode(1e2+Math.random()*33)でランダムに文字を生成する ③ctx.fillStyle='rgba(0,0,0,.05)'; ctx.fillRect(0,0,width,height); ctx.fillStyle='#0F0′;で不透明度0.5の半透明の黒背景を繰り返し生成する ④x = (index * 10)+10;とyPositions[index] = y + 10;で表示文字の位置を順次決定する ⑤fillText(text, x, y);で指定した位置に文字を表示する 以上の手順を繰り返すと「マトリックス」のタイトル効果が得られます。
        */
        $(ドキュメント).ready(関数() {
            var s = window.screen;
            var width = q.width = s.width;
            var 高さ = q.height;
            var yPositions = Array(300).join(0).split('');
            var ctx = q.getContext('2d');
            var 描画 = 関数 () {
                ctx.fillStyle = 'rgba(0,0,0,.05)';
                ctx.fillRect(0, 0, 幅, 高さ);
                ctx.fillStyle = '赤';
                ctx.font = '10pt ジョージア';
                yPositions.map(関数(y, インデックス) {
                    テキスト = String.fromCharCode(1e2 + Math.random() * 33);
                    x = (インデックス * 10) + 10;
                    q.getContext('2d').fillText(テキスト、x、y);
                    y > Math.random() * 1e4 の場合
                        y位置[インデックス] = 0;
                    } それ以外 {
                        y位置[インデックス] = y + 10;
                    }
                });
            };
            マトリックスを実行します();
            関数 RunMatrix() {
                Game_Interval = setInterval(描画、30);
            }
        });
    </スクリプト>
</head>
<本文>
    <div align="center">
        <キャンバスid="q" 幅="500" 高さ="500"></キャンバス>
    </div>
</本文>
</html>

例2

<html>
<ヘッド>
 
    <title>HACKER-2 をご存知ですか</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
            </script> ...
</head>
 
<本文>
    <div align="center">
        <キャンバス id="myCanvas" 幅="1024" 高さ="800" スタイル="border:1px solid #c3c3c3;">
            お使いのブラウザは HTML5 キャンバス タグをサポートしていません。
        </キャンバス>
        <script type="text/javascript">
            var YPositions = Array(51).join(0).split('');
            /*
                join() メソッドは、配列内のすべての要素を文字列にまとめるために使用されます。split() メソッドは、文字列を文字列配列に分割するために使用されます*/
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var 描画 = 関数 () {
                ctx.fillStyle = 'rgba(0,0,0,.05)';
                ctx.fillRect(0, 0, 1024, 800); ctx.fillStyle = "#0f0";
                YPositions.map(関数(y, インデックス) {
                    /*
                        map() は各要素を関数に渡して現在の一致するセットに渡し、戻り値を含む新しい jQuery オブジェクトを生成します*/
                    x = (インデックス * 10);
                    ctx.fillText(parseInt(Math.random() * 10), x, y);
                    /*
                        インデックスがY位置の添え字である(x,y)座標位置に「a」文字を生成します*/
                    （y > 500）の場合{
                        Y位置[インデックス] = 0;
                    } それ以外 {
                        Y位置[インデックス] = y + 10;
                    }
                    /*
                        新しく生成された文字が<canvas>の末尾に到達した場合、次の新しい文字の位置は原点に戻ります*/
                });
            };
            描画間隔を30に設定します。
        </スクリプト>
</本文>
</html>

例3

<html>
<ヘッド>
 
    <title>HACKER-1 を知っていますか</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
 
<本文>
    <div align="center">
        <キャンバス id="myCanvasMatrix" 幅="500" 高さ="200" スタイル="border:1px solid #c3c3c3;">
            <!-- <canvas> タグは IE9 より前のブラウザではサポートされていません -->
            ブラウザをアップグレードしてください
        </キャンバス>
        <br>
        <button type="button" id="puse">クリック</button>
        <button type="button" id="run">実行</button>
    </div>
    <script type="text/javascript">
        $(ドキュメント).ready(関数() {
        /*
            var c2 = document.getElementById("myCanvasMatrix");
            var ctx2 = c2.getContext("2d");
            ここで 'ctx2' は次の 'ctx1' と同等です。
        */
        var ctx1 = $("#myCanvasMatrix").get(0).getContext("2d");
        /*
            $("").get(0)は内部DOMオブジェクト参照を取得することを意味します。つまり、オブジェクトのDOMオブジェクトを取得した後、対応するDOM APIを使用できます。
        */
        /*
            getContext() メソッドは、キャンバスに描画するための環境を返します。
            Canvas.getContext(コンテキストID);
            contextID パラメータの唯一の有効な値は '2d' です。これは、2D 描画がサポートされていることを意味します。'3d' は将来サポートされる可能性があります。
        */
        var 行列 = 関数(){
            /*
                var my_gradient = ctx1.createLinearGradient(0,0,0,170);
                my_gradient.addColorStop(0、"黒");
                my_gradient.addColorStop(1,"白");
                ctx1.fillStyle=my_gradient;
            */
            ctx1.fillStyle = 'rgba(0,0,0,.07)';
            /*
                fillStyle プロパティは、ペイントを塗りつぶすために使用される色、グラデーション、またはパターンを設定または返します。
                rgba(R,G,B,A)
                ここで '.05' はアルファ透明度を表します*/
            ctx1.fillRect(0,0,500,500);
            /*
                fillRect() メソッドは、指定された四角形を、fillStyle 属性で指定された色、グラデーション、パターンで塗りつぶします。
            ctx1.fillStyle = "#0f0";
            ctx1.fillText('zhengbin', Math.random()*(500), Math.random()*(500));
            ctx1.fillText('cnblogs', Math.random()*(500), Math.random()*(500));
            /*
                原則としては、表示する新しい透明な背景とコンテンツを継続的に生成することです。
                このように、新しい背景が古い表示コンテンツを覆い、新しいコンテンツが目立つようになります*/
        };
        実行Fun();
        変数ID;
        関数stopFun(){
            クリア間隔(id);
        }
        関数runFun(){
            id = setInterval(行列、50);
        /*
           setInterval() の定義と使用法:
           setInterval() メソッドは、指定された期間 (ミリ秒単位) で関数を呼び出したり、式を評価したりします。
           setInterval() メソッドは、clearInterval() が呼び出されるかウィンドウが閉じられるまで、関数を繰り返し呼び出します。 setInterval() によって返される ID 値は、clearInterval() メソッドのパラメーターとして使用できます。
        */
        }
        $("button#puse").click(function() {
            停止Fun();
        });
        $("button#run").click(function() {
            実行Fun();
        });
    });
    </スクリプト>
</本文>
</html>

例4

<!DOCTYPE html>
 
<html>
 
<ヘッド>
 
<メタ文字セット="utf-8">
 
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ">
 
<meta http-equiv="X-UA-compatible" content="IE=Edge,chrome=1">
 
</head>
 
<本文>
 
<キャンバスid="コンテンツ" 幅="1250px" 高さ="602px"></キャンバス>
 
</本文>
 
</html>
 
<スクリプト>
 
  var cav = document.getElementById('content');
 
  var w = window.screen.width;
 
  var h = window.screen.height;
 
  var yPositions = Array(300).join(0).split('');
 
  var ctx = cav.getContext('2d');
 
  var 描画 = 関数(){
 
 
 
    ctx.fillStyle = 'rgba(0,0,0,.05)';
 
    ctx.fillRect(0,0,幅,高さ);
 
    ctx.fillStyle = '緑';
 
    ctx.font = '20px';
 
 
 
    yPositions.map(関数(y,インデックス){
 
      テキスト = String.fromCharCode(1e2+Math.random()*330);
 
      x = インデックス*10;
 
      cav.getContext('2d').fillText(テキスト、x、y);
 
      if(y>Math.random()*1e4){
 
        y位置[インデックス]=0;
 
      }それ以外{
 
        y位置[インデックス]=y+10;
 
      }
 
    });
 
 
 
  }
 
  setInterval('draw()',30);
 
</スクリプト>

参考文献

https://www.cnblogs.com/fenger-VIP/p/7651562.html

これで、4 つの興味深いハッカー背景効果 JS コードを共有するこの記事は終了です。ハッカー背景効果 JS コードに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: