ホームページ >ウェブフロントエンド >H5 チュートリアル >H5キャンバスにパーティクルクロックを実装する詳細な方法

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

不言オリジナル: 2018-09-06 17:43:572386ブラウズ

この記事の内容は、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 個の文字で構成されています。

H5キャンバスにパーティクルクロックを実装する詳細な方法は次のように見ることができます。 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

同時に、円の高さを計算することによって半径も求めることができます。以下の通りです: H5キャンバスにパーティクルクロックを実装する詳細な方法

円の高さは(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キャンバスにパーティクルクロックを実装する詳細な方法

関連記事