パーティクルクロックを実装するHTML5キャンバスのサンプルコード-H5 チュートリアル-php.cn

パーティクルクロックを実装するHTML5キャンバスのサンプルコード

青灯夜游

リリース： 2018-10-09 15:38:29

転載

1621 人が閲覧しました

この記事では主にパーティクルクロックを実装するためのHTML5キャンバスのサンプルコードを紹介します。必要な方は参考にしていただければ幸いです。

まず、次のようにパーティクルクロックの効果を見てみましょう:

次に、キャンバスと js を介して実装します。

まず、次のように html ファイルを作成し、キャンバスキャンバスを追加する必要があります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            margin: 0, auto;
            width: 600px;
            
        }
    </style>
</head>
<body>
    <p id="container">
        <canvas id="canvas"></canvas>
    </p>
</body>

ログイン後にコピー

以下のマテリアル digit.js をインポートします。マテリアルは 2 次元配列の数値で構成されており、合計は: 0-9 とコロン、10 文字、次のように:

1 の文字が形成されていることがわかります

キャンバスの作成を開始しましょう:

function Clock() {
        var canvas = document.getElementById("canvas");
        canvas.width = 600;
        canvas.height = 100;
        this.cxt = canvas.getContext(&#39;2d&#39;);
        this.cxt.fillStyle="#ddd";
        this.cxt.fillRect(0, 0, 500, 100);
    }

ログイン後にコピー

上記のコードは次のようになります。ブラウザは小さな灰色のキャンバスを描画します。

分析を開始しましょう:

1 データマトリックスを理解していますか?多次元配列です。

2 円を描くにはどうすればよいですか?

2.1 まず半径を知る必要がありますか?

上の図から、円の中心の位置は次のとおりであることがわかります。

r+1
r+1 + (r+1)*2*1
r+1 + (r+1)*2*2
。。。
r+1 + (r+1)*2*i

ログイン後にコピー

同時に、半径も次のようになります。

円の高さは (r 1)*2 で、キャンバスの高さは 10 個の円で構成されます。

canvasHeight = (r+1)*2*10

ログイン後にコピー

キャンバスの高さを100にするとrが出て、円の中心xyも出てきます。
まず、上のClockオブジェクトにステートメントを追加します。 r

this.r = 100/20-1;

ログイン後にコピー

を計算するために、次に、Clock

Clock.prototype.draw = function(num, index) {
        this.cxt.fillStyle="#000";
        for (let i=0; i<digit[num].length; i++) {
            for (let j=0; j<digit[num][i].length; j++) {
                if (digit[num][i][j] == 1) {
                    this.cxt.beginPath();
                    this.cxt.arc(index*70+(this.r+1)+(this.r+1)*2*j, (this.r+1)+(this.r+1)*2*i, this.r, 0, Math.PI*2, false);
                    this.cxt.closePath();
                    this.cxt.fill();
                }
            }
        }
    }

ログイン後にコピー

draw 受信の 2 つのパラメーターのプロトタイプに描画メソッドを追加します。1 つ目は文字インデックス、2 つ目は文字オフセットシーケンスです。 70 はオフセット距離であり、カスタマイズできます。
最初の for は、レンダリングする文字配列を取得します。2 番目の for は、レンダリングする各行を取得し、それを 1 としてのみレンダリングします。円を描画するためのパラメーターは、主に x、y、r

です。ステップは、次のように正規表現を使用して新しい日付から時間を直接取得することです:

Clock.prototype.getTime = function() {
        var reg = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        var data = [];
        data.push(reg[1], reg[2], 10, reg[3], reg[4], 10, reg[5], reg[6]);
        for (var i=0; i<data.length; i++) {
            this.draw(data[i], i);
        }
    }

ログイン後にコピー

対応する形式に注意してください。配列をプッシュするとき、10 は js の 10 番目の文字、つまりコロン
を表します。このように描画すると問題が発生することに注意してください。つまり、キャンバスを更新できません。

canvas.height= 100

ログイン後にコピー

そして、次のように以下のコードを実行できます:

var clock = new Clock();
setInterval(()=>{
        clock.getTime();
    })

ログイン後にコピー

わかりました、それでOKです

要約: 上記がこの記事の全内容です。みんなの勉強に役立ちます。関連チュートリアルの詳細については、Html5 ビデオチュートリアルをご覧ください。