H5キャンバスにパーティクルクロックを実装する詳細な方法

この記事の内容は、h5 キャンバスにパーティクル クロックを実装する詳細な方法に関するものです。必要な方は参考にしていただければ幸いです。

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

次に、canvas と js を介して実装します。
最初に html ファイルを作成し、canvas キャンバスを追加する必要があります

nbsp;html>


    <meta>
    <title>Document</title>
    <style>
        .container{
            margin: 0, auto;
            width: 600px;
        }
    </style>


    <p>
        <canvas></canvas>
    </p>

以下のマテリアル digit.js をインポートします。マテリアルは、次のように 0 ～ 9 とコロン、10 個の文字で構成されています。

は次のように見ることができます。 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><p>drawは受け取ります2 つのパラメータ、1 つ目は文字インデックス、2 つ目は文字オフセット シーケンス、70 はオフセット距離で、カスタムできます。 <br>最初の for はレンダリングする文字配列を取得します。2 番目の for はレンダリングする各行を取得し、それを 1 としてのみレンダリングします。円を描画するためのパラメーターは主に x、y、r です</p>
<p>次のステップは時間を取得することです。次のように、通常のルールを使用して、新しい Date から時間を直接取得できます: <br></p>
<pre class="brush:php;toolbar:false">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> 通常のルールを使用して、時間、分、秒を簡単に取得できます。10 は 10 番目を表します。 digit.js の文字、つまりコロン <p>このように描画すると問題が発生することに注意してください。つまり、キャンバスを更新できません。これを追加できます </p>
<pre class="brush:php;toolbar:false">canvas.height= 100

以下のようにコードを実行できます。
rreee

はい、これは大丈夫です。

関連する推奨事項:

h5 キャンバスを使用して時計のダイナミックな効果を実現

キャンバスを使用して見事なパーティクル モーション エフェクトを実現

以上がH5キャンバスにパーティクルクロックを実装する詳細な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。