BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

Html5キャンバスパーティクルクロック サンプルコード

2022-02-01 13:55:21

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

ここでは、canvas と js を使って実装します。

まず、以下のようにhtmlファイルを作成し、canvasキャンバスを追加します。 

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

次の素材digit.jsをインポートし、以下のように0〜9の合計10文字の数字とコロンの2次元配列で素材を綴っています。

1である文字が構成していることがわかります。

ここで、キャンバスの作成方法を説明します。 

function Clock() {
        var canvas = document.getElementById("canvas");
        canvas.width = 600;
        canvas.height = 100;
        this.cxt = canvas.getContext('2d');
        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のプロトタイプにdrawメソッドを追加しています。 

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の文字だけをレンダリングします。

次に、時間を取得する必要があります。これは、次のように正規表現を使用して新しい日付から直接取得することができます。 

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はdigit.jsの10文字目、つまりコロンです
なお、この方法で描画すると、キャンバスの更新ができないという問題があるので、次のように追加します。 

canvas.height= 100

これで、以下のようにコードを実行することができます。 

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

そこ、OKです

今回の記事は以上です！勉強になります！そして、もっとスクリプトハウスを応援してほしいです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します