まず、次のようにパーティクル クロックの効果を見てみましょう。
以下では、canvas と js を介して実装します。
まず、次のように html ファイルを作成し、キャンバスを追加します。
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <title>ドキュメント</title> <style> .container{ margin: 0, auto; </style; ></head><body> <div id=container> <canvas id=canvas></canvas> </div></body>次に、マテリアル digit.js をインポートします。マテリアルは、次のように 0 ～ 9 とコロンの合計 10 個の数字で構成されています。
1の文字が以下で構成されていることがわかります。
キャンバスの作成を始めましょう。
関数 Clock() { var Canvas = document.getElementById(canvas); Canvas.height = 100; this.cxt.fillStyle=#ddd; .cxt.fillRect(0, 0, 500, 100);上記のコードは、ブラウザーに小さな灰色のキャンバスを描画できます。
以下の分析を始めましょう。
1. データ マトリックスを理解していますか?多次元配列です
2. 円を描くにはどうすればよいですか?
2.1 まず半径を知る必要がありますか?
上の図からわかるように、円の中心の位置は次のとおりです。
r+1r+1 + (r+1)*2*1r+1 + (r+1)*2*2。 。 。 r+1 + (r+1)*2*i
同時に、次のように円の高さを計算して半径を取得することもできます。
円の高さは (r+1)*2 で、キャンバスの高さは 10 個の円で構成されます。
キャンバスの高さ = (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<数字[数字][i].length; j++) { if (数字[数字][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(); } } }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]); i=0; i<データ.長さ; i++) { this.draw(データ[i], i);正規表現を使用して時、分、秒を簡単に取得できます。配列をプッシュするときは、対応する形式 10 が digit.js の 10 番目の文字 (コロン) を表していることに注意してください。
このようにペイントすると、キャンバスを更新できないという問題が発生することに注意してください。
キャンバスの高さ= 100
これで、次のようにコードを実行できるようになります。
var Clock = new Clock();setInterval(()=>{ Clock.getTime(); })わかりました、これで大丈夫です
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。