本当のデジタル時計

数字で表示するアナログ時計もある

数字で表示するのは全てデジタル時計なのかということを考えてもらうためのページです。ここに示した時計は確かに本当のデジタル時計ですが、アナログな数字表示時計に示したものはアナログ時計と言うべきでしょう。

時計のプログラム

Javascriptです。canvasを使わなくても文字で表現できますが、アナログな数字表示時計と同様な見た目を確保するためにcanvasを用いています。

基本的構造は同じです。drumclock()の内部が単純になっています。

function drumclock() {
  var now = new Date();
  var hour = now.getHours();
  var mint = now.getMinutes();
  var sec  = now.getSeconds();
  var h  = canv.height;
  var w  = canv.width;
  var yb = h*0.9;
  g.font = Math.floor(h)+ "px 'DejaVu Serif'";
  var fw = h*2/3;
  var xbgn = (w-fw*8)/2
  if (lasthour != hour){
    g.clearRect( 0, 0, xbgn+fw*3, h );
    g.fillText(("0"+hour.toString()).slice(-2),xbgn,yb);
    //  g.fillText(":",xbgn+fw*2.2,h*0.8);
    g.beginPath();
    g.arc(xbgn+fw*2.4, h*4/10, fw*0.08, 0, Math.PI*2,true);
    g.arc(xbgn+fw*2.4, h*7/10, fw*0.08, 0, Math.PI*2,true);
    g.closePath();
    g.fillStyle   = '#000000';
    g.fill();
  }
  if (lastmint != mint){
    g.clearRect( xbgn+fw*3, 0, xbgn+fw*6, h );
    g.fillText(("0"+mint.toString()).slice(-2),xbgn+fw*3,yb);
    g.beginPath();
    g.arc(xbgn+fw*5.4, h*4/10, fw*0.08, 0, Math.PI*2,true);
    g.arc(xbgn+fw*5.4, h*7/10, fw*0.08, 0, Math.PI*2,true);
    g.closePath();
    g.fillStyle   = '#000000';
    g.fill();
  }
  if (lastsec != sec){
    g.clearRect( xbgn+fw*6, 0, w, h );
    g.fillText(("0"+sec.toString()).slice(-2) ,xbgn+fw*6,yb);
  }
  lasthour = hour;
  lastmint = mint;
  lastsec  = sec;
  setTimeout('drumclock()',100);
}

次の1秒やミリ秒が必要なくなり、代わりにlastsecを用意して必要な時だけ描くことにしました。

繰り返しの頻度も0.1秒に落としています。

初期化と開始

アナログなデジタル時計と比べてlastsecが加わっただけです。

var canv;
var g;
var lasthour,lastmint,lastsec;
function init(){
   canv = document.getElementById('carea');
   g = canv.getContext('2d');
   drumclock();
}

window.onload = function() {
  init();
}

アナログな数字表示時計⇦