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

nbsp;html>


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


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

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);
    }

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

canvasHeight = (r+1)*2*10

this.r = 100/20-1;

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