JS+Canvas でダイナミックな時計効果を実現

JS+Canvas でダイナミックな時計効果を実現

参考までに、Canvas をベースにしたダイナミッククロックのデモを用意しました。具体的な内容は次のとおりです。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>ダイナミック クロック</title>
  <script type="text/javascript" src="js/lattice.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
  <スタイル タイプ="text/css">
   *{
    パディング: 0;
    マージン: 0;
   }
   #キャンバスボックス{
    境界線の幅: 2px;
    境界線の色: 黒;
    境界線のスタイル: solid;
    幅: 80%;
    マージン: 0 自動;
   }
  </スタイル>
 </head>
 <本文>
  <!-- キャンバスをボックス内に配置し、ボックスを使用してキャンバスの位置を制御します-->
  <div id="キャンバスボックス">
   <キャンバスid="キャンバス">
    このブラウザはキャンバスをサポートしていません
   </キャンバス>
  </div>
 </本文>
</html>

ラティス

格子 =
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1、1、1、1、1、1、1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1、1、1、1、1、1、1]
        ],//2
        [
            [1,1,1,1,1,1,1]、
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1]、
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1]、
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1]、
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0]
        ]//:
    ];

スクリプト

変数 CANVAS_WIDTH;
var CANVAS_HEIGHT = 600;
//ドットマトリックス内の円の半径を設定します。var RADIUS = 8;
//境界線からの時計の位置を設定します var MARGIN_LEFT = 100;
var MARGIN_TOP = 40;
 
//初期状態の時間を取得します。var time = new Date();
var 時間 = time.getHours();
var minutes = time.getMinutes();
var 秒 = time.getSeconds();
 
//ボールオブジェクトを格納するために使用されます var balls = [];
//ボールの色 var colors = ["赤","オレンジ","黄","緑","青","紫","ピンク"]
 
window.onload = 関数(){
 // キャンバスの外側のボックスの幅を取得して、キャンバスを外側のボックスと同じ幅にします。var canvasBox = document.getElementById("canvasBox");
 var boxWidth = getComputedStyle(canvasBox,null);
 CANVAS_WIDTH = parseInt(boxWidth.width);
 
 // キャンバスの幅と高さを設定し、ブラシ オブジェクトを取得します。var canvas = document.getElementById("canvas");
 キャンバスの幅 = CANVAS_WIDTH;
 キャンバスの高さ = CANVAS_HEIGHT;
 var コンテキスト = canvas.getContext("2d");
 
 //時間指定呼び出し、50ミリ秒ごとに1回呼び出し setInterval(function(){
  //描画関数draw(context);
 },50);
 
 関数draw(ctx){
  //画面を更新します ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
  
  //現在の時刻を取得します。var curTime = new Date();
  var curHours = curTime.getHours();
  var curMinutes = curTime.getMinutes();
  var curSeconds = curTime.getSeconds();
 
  //時間を描画する drawLattice(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10),ctx);
  drawLattice(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10),ctx);
  //コロンを描画します。drawLattice(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,ctx);
  //分を描画します。drawLattice(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10),ctx);
  格子を描画します(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10),ctx);
  //コロンを描画します。drawLattice(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,ctx);
  //秒を描画します。drawLattice(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10),ctx);
  格子を描画します(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%10),ctx);
  
  //時間を更新してボールを描画します update(context,curHours,curMinutes,curSeconds);
  
  //ボールの数を観察する//console.log(balls.length);
 }
 
 //パラメータ:
 //x: デジタル格子の左上隅の水平座標を描画します //y: デジタル格子の左上隅の垂直座標を描画します //num: 描画する番号、実際には格子のインデックス、10 はコロンを表します //ctx: ブラシ関数 drawLattice(x,y,num,ctx){
  for(var i=0;i<lattice[num].length;i++){
   for(var j=0;j<lattice[num][i].length;j++){
    if(格子[num][i][j]==1){
     ctx.beginPath();
     ctx.fillStyle = "青";
     ctx.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
     ctx.fill();
     ctx.closePath();
    }
   }
  }
 }
 
 //時間を更新してボールを描画する function update(ctx,curHours,curMinutes,curSeconds){
  if (秒数!=現在の秒数) {
   //時間を更新if(parseInt(curHours/10)!=parseInt(hours/10)){
    ボールを追加します(MARGIN_LEFT、MARGIN_TOP、parseInt(curHours/10));
   }
   （parseInt（curHours%10）！=parseInt（hours%10））{
    addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10));
   }
   //分数を更新if(parseInt(curMinutes/10)!=parseInt(minutes/10)){
    addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10));
   }
   if (parseInt(curMinutes%10)!=parseInt(minutes%10)){
    addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10));
   }
   //秒数を更新 if(parseInt(curSeconds/10)!=parseInt(seconds/10)){
    addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));
   }
   if (parseInt(curSeconds%10)!=parseInt(seconds%10)){
    addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%10));
   }
   
   //すべての時間を更新 hours = curHours;
   分 = curMinutes;
   秒数 = curSeconds;
  }
  //ボールを描画します。drawBalls(ctx);
  //ボールの動きを更新します updateBalls();
 }
 
 //ボールを 1 つ追加します //パラメータ:
 //x: ボールの水平座標 //y: ボールの垂直座標 //num: 変化する時間数 function addBalls(x,y,num){
  for(var i=0;i<lattice[num].length;i++){
   for(var j=0;j<lattice[num][i].length;j++){
    if(格子[num][i][j]==1){
     //小さなボールオブジェクトを追加 var ball = {
      //座標 x:x+j*2*(RADIUS+1)+(RADIUS+1)、
      y:y+i*2*(半径+1)+(半径+1)、
      // 重力加速度 g:1.5+Math.random(),
      //x、y方向の速度 vx:Math.pow(-1,Math.ceil(Math.random()*1000))*5,
      vy:-5,
      //ボールの色 color: colors[Math.floor(Math.random()*colors.length)]
     }
     //ボールをストレージキューに追加します balls.push(ball);
    }
   }
  }
 }
 
 //ボールを描画する function drawBalls(ctx){
  for(var i=0;i<balls.length;i++){
   ctx.beginPath();
   ctx.fillStyle = ボール[i].color;
   ctx.arc(balls[i].x,balls[i].y,半径,0,2*Math.PI,true);
   ctx.fill();
   ctx.closePath();
  }
 }
 
 //ボールの動きを更新する関数 updateBalls(){
  //ストレージ配列内のボールのダイナミクスを更新します for(var i=0;i<balls.length;i++){
   ボール[i].x += ボール[i].vx;
   ボール[i].y += ボール[i].vy;
   ボール[i].vy += ボール[i].g;
   
   //エッジ衝突検出 if(balls[i].y>=CANVAS_HEIGHT-RADIUS){
    ボール[i].y=CANVAS_HEIGHT-RADIUS;
    //衝突の反発と抵抗をシミュレートします balls[i].vy=-balls[i].vy*0.6;
   }
  }
  //ボールがキャンバスから転がり出ると、配列から削除できます。以下は削除アルゴリズムです //保持するボールの数を保存します var numBall = 0;
  for(var i=0;i<balls.length;i++){
   if(balls[i].x+RADIUS>0&&balls[i].x-RADIUS<CANVAS_WIDTH){
    //現在のボールが画面上にあると判断された場合、ボールを可能な限り前方に移動します。各ループの後、配列の末尾にあるボールがキャンバスから転がり出るボールです。balls[numBall] = balls[i];
    numBall++;
   }
  }
  //配列の最後からボールを​​削除します while (balls.length>numBall) {
   ボールをポップします。
  }
 }
};

効果画像:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • HTML5 キャンバス js (デジタル時計) サンプルコード
  • JS+Canvas で時計効果を描く
  • js Canvas で円形時計を実現するチュートリアル
  • JS+Canvas でダイナミックな時計効果を描く
  • JavaScript と Canvas を組み合わせてシンプルな円形時計を実現
  • js+html5 はキャンバス描画ウェブクロックメソッドを実装します
  • JavaScript html5 キャンバスが時計効果を描画します
  • JavaScript学習のまとめ：キャンバスを使って「ドラえもん」の時計を描く
  • 時計効果を実現するJS+H5キャンバス
  • js Canvasは円形の時計効果を描画します

<<:  XHTMLタグは適切に使用する必要があります

>>:  MySQL ユーザー変数と set ステートメントの例の詳細な説明

推薦する

nginx でクロスドメイン障害修復を構成する方法の例

Nginxのクロスドメイン設定は次のようには機能しません サーバー{ 聞く 80; server_n...

MySQL DATEDIFF 関数を使用して 2 つの日付間の時間間隔を取得する方法

説明する2 つの日付間の時間間隔を返します。文法DateDiff(間隔、日付1、日付2 [、週の最初...

MySQLクライアントとサーバーのプロトコルの解釈

目次MySQL クライアント/サーバー プロトコルMySQL サーバーから高いパフォーマンスを得る必...

DockerコンテナにNFS共有ディレクトリをマウントする実装

以前、https://www.jb51.net/article/205922.htm で、Docke...

Linux サーバーと Windows システム間でファイルをアップロードおよびダウンロードする方法

背景: Linux サーバーのファイルのアップロードとダウンロード。 XShell+Xftp インス...

フレックスレイアウトでコンテナ内のコンテンツを維持するためのソリューションの詳細な説明

モバイル側では、フレックスレイアウトが非常に便利です。デバイスの幅に応じてコンテナの幅を自動的に調整...

テーブルセルの幅tdの設定は無効であり、内部コンテンツによって常に引き伸ばされます

テーブルページを作成するときに、td に設定された幅が無効になることがあります。td の幅は常に内部...

Chrome Dev Tools を使用してページのパフォーマンスを分析する方法 (フロントエンドのパフォーマンス最適化)

背景開発やデバッグには Chrome Dev Tools がよく使用されますが、ページのパフォーマン...

Vue プロジェクトで垂直テーブルを 2 つの方法で実装するアイデアの分析

問題の説明私たちのプロジェクトでは、水平方向のテーブルが一般的ですが、必要に応じて垂直方向のテーブル...

TypeScript マッピング型の詳細

目次1. マップされた型2. マッピング修飾子3. キーの再マッピング4. さらなる探究序文： Ty...

webpack イメージを base64 に変換する例

url-loader をダウンロード 糸を追加 -D URLローダー モジュール: { ルール: {...

Windows10でmysql8.0.17を置き換える詳細なチュートリアル

この記事では、Windows10でmysql8.0.17を置き換える具体的な手順を参考までに紹介しま...

重複データの処理に関するMySQL学習ノート

MySQLは重複データを処理します一部の MySQL テーブルには重複レコードが含まれている場合があ...

複雑なウェブサイトのナビゲーションを簡素化

<br />ナビゲーション設計は構造設計における主要なタスクの 1 つです。ソフトウェア...

Nginx 静的サービス設定の詳細な説明 (ルートとエイリアスの指示)

静的ファイルNginx は高いパフォーマンスで知られており、フロントエンドのリバース プロキシ サー...