h5canvas は、Matrix 長方形配列エフェクト コードを実装します。

Che DabangさんがMatrix長方形配列の実装に関する記事をブログパークに書いているのを見て、canvasにはまだまだ素晴らしいところがあったと感じたのでメモしておきます。

達成される効果は次のとおりです:

実際、重要なコード行を 1 行または 2 行追加するだけで、予期しない効果が得られることがあります。

キャンバスによって実装されているため、最初のステップは次のようにページに Canvas タグを追加することです:

<canvas id="canvas">请使用高版本浏览器，IE8以及一下不支持canvas</canvas>

CSS コード:

html,body{height:100%;overflow:hidden}

キャンバスがブラウザーで全画面表示される効果があるため、次のステップは、画面を変更することです。 次のように、幅と高さをキャンバスに割り当てます。

var width,height,
  canvas = document.getElementById("canvas");
  canvas.width = width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  canvas.height = height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

次のように、キャンバスの 2D 描画環境を作成します。

var ctx = canvas.getContext('2d');

以下の 配列 を作成します。主な目的は、配列を使用してキャンバスに漢字の Y 値を格納することです。わからなければ読んだらすべてわかります。

 var num = Math.ceil(width / 10);
 var y = Array(num).join(0).split('');

num の値は、画面の幅を num 個の部分、つまり num 列に分割します。各列の幅は 10px です。

canvas描画コード: コード内で

var draw = function() {
        ctx.fillStyle = 'rgba(0,0,0,.05)'; //核心代码，创建黑色背景，透明度为0.05的填充色。
        ctx.fillRect(0, 0, width, height);
        ctx.fillStyle = '#0f0'; //设置了字体颜色为绿色
        ctx.font = '10px Microsoft YaHei';//设置字体大小与family
        for(i = 0; i < num; i++) {
            var x = (i * 10) + 10;
            text = String.fromCharCode(65 + Math.random() * 62);
            var y1 = y[i];
            ctx.fillText(text, x, y1);
            if(y1 > Math.random() * 10 * height) {
                y[i] = 0;
            } else {
                y[i] = parseInt(y[i]) + 10;
            }
        }
    }

ctx.fillStyle = 'rgba(0,0,0,.05)' ページはこの描画メソッドを繰り返し呼び出しているため、透明度も重ねられ、テキストの色が変わります。内部にも変更があり、すべてが 3D で階層的に見えます。

コード内の for ループ の主な機能は、Unicode 値を渡して文字列を返す String.fromCharCode() メソッドが使用されることです。 JavaScript シリーズのメソッドと例 (1)

次に、フォントの位置を設定します。たとえば、最初の行のフォントの位置は [10,10],[20,10],[30,10]....; 2行目のフォント位置は[20,20]、[30,20]、[40,20]・・・と順に導出されます。

つまり、コードでは var y = Array(num).join(0).split(''); とすると、フォント位置の y 値が保存され、その後、for ループを通じて順番に +10 されます。配列の機能を知っていること。

最後に、このメソッドを繰り返し呼び出します:

;(function(){
        setInterval(draw, 100);
    })();

draw メソッドをオンラインで実装するために使用される map メソッドは、実際には同じです。 コードを貼り付けます:

$(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 = 'red';
            ctx.font = '10pt Georgia';
            yPositions.map(function(y, index) {
                text = String.fromCharCode(1e2 + Math.random() * 33);
                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, 1000);

        }
    });

最後に、全体のコード:

<canvas id="canvas">请使用高版本浏览器，IE8以及一下不支持canvas</canvas>

[関連する推奨事項]

1. 特別な推奨事項: 「php Programmer Toolbox」V0.1 バージョンのダウンロード

2. 無料の h5 オンライン ビデオ チュートリアル

3. cn オリジナル html5 ビデオチュートリアル

以上がh5canvas は、Matrix 長方形配列エフェクト コードを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。