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 ステートメントの例の詳細な説明

推薦する

Vueはシンプルな計算機能を実装します

この記事では、参考までに、簡単な計算機機能を実現するためのVueの具体的なコードを紹介します。具体的...

MySQLはイベントを使用してスケジュールされたタスクを完了します

イベントでは、SQL コードを 1 回または一定の間隔で実行することを指定できます。通常、複雑な S...

vue3 を使用したジグソーパズルゲームのリファクタリングの例

序文プロジェクト内のパズルゲーム（デジタル華容路とも呼ばれる）を再構築するのに 2 日かかりました。...

VMware Workstation 14 Pro は CentOS 7.0 をインストールします

VMware Workstation 14 ProにCentOS 7.0をインストールする具体的な方...

Docker を使用して ELK 環境を迅速にデプロイする方法の詳細な説明 (最新バージョン 5.5.1)

Linux サーバーに Docker をインストールした後、関連する公式 Docker イメージを...

KVM 仮想化のインストール、展開、管理のチュートリアル

目次1.kvmの展開1.1 kvmのインストール1.2 kvm Web管理インターフェースのインスト...

Mysql SQL ステートメントのコメント

MySQL SQL ステートメントにコメントを追加できます。MySQL SQL ステートメントのコメ...

Vue3 ミックスインの使い方

目次1. mixin の使い方は？ 2. ミックスイン使用時の注意2.1. ミックスイン オブジェク...

mysql の追加、削除、変更、クエリの基本ステートメント

文法以下は、MySQL テーブルにデータを挿入するための INSERT INTO コマンドの一般的な...

Linux curl フォームのログインまたは送信と Cookie の使用に関する詳細な説明

序文この記事では主に、curl を介してフォーム送信ログインを実装する方法について説明します。単一の...

jsを使用して簡単な抽選機能を実現する

この記事では、参考までに、簡単な抽選機能を実装するためのjsの具体的なコードを共有します。具体的な内...

MySQLはテーブル内のフィールドを別のテーブル内のフィールドの値と等しくなるように更新します

以下のように表示されます。 table1 を z として更新し、table2 を zb として結合し...

データベースの水平セグメンテーションを実装するための2つのアイデア

導入インターネット アプリケーションの普及に伴い、膨大なデータの保存とアクセスがシステム設計における...

10 HTML テーブル関連タグ

実際、多くの人が「テーブルは絶対に使用すべきではないと聞いたことがある」と言いますが、これは絶対に間...

Navicat を使用して MySQL データベースをエクスポートおよびインポートする方法

MySql は、私たちが頻繁に使用するデータ ソースです。開発者が練習、小規模なプライベート ゲーム...