JavaScriptでキャンバスを使ったデジタル時計を作ろう【初心者向け】

2021年11月6日

前回

canvasタグを使ってデジタル時計を表示しよう

前回はデジタル時計をそのままベタ書きで表示しましたが、今回はキャンバスを作成して、そこにデジタル時計を表示させてみましょう。
キャンバスは、canvasタグを使って作成します。
canvasタグは、グローバル属性(全てのHTMLで共通の属性)以外に、width(幅)とheight(高さ)の属性を持っています。
この二つの属性にはデフォルトがあり、widthは300(ピクセル)は、heightは150(ピクセル)になります。

キャンバスを使ってデジタル時計を表示するプログラム

キャンバスを使って、デジタル時計を表示するプログラムは、以下のようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
</head>
<body onload="strClock();">
  <canvas id="pos" width="300" height="100"></canvas>
  <script type="text/javascript">

    // 時刻取得関数
    function getTime() {
      var now = new Date();
      var hh = ('0' + now.getHours()).slice(-2);
      var mm = ('0' + now.getMinutes()).slice(-2);
      var ss = ('0' + now.getSeconds()).slice(-2);
      nowtime = hh + ":" + mm + ":" + ss;
      var id1 = document.getElementById('pos');
      var clock = id1.getContext('2d')
      clock.font = "32pt メイリオ";
      clock.fillStyle = "red";
      clock.clearRect(0, 0, 300, 100)
      clock.fillText(nowtime, 0, 40);
    }

    // 開始関数
    function strClock() {
      setInterval("getTime();", 1000);
    }
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Canvas</title>

</head>

// 時刻取得関数

function getTime() {

var now = new Date();

var hh = ('0' + now.getHours()).slice(-2);

var mm = ('0' + now.getMinutes()).slice(-2);

var ss = ('0' + now.getSeconds()).slice(-2);

nowtime = hh + ":" + mm + ":" + ss;

var id1 = document.getElementById('pos');

var clock = id1.getContext('2d')

clock.font = "32pt メイリオ";

clock.fillStyle = "red";

clock.clearRect(0, 0, 300, 100)

clock.fillText(nowtime, 0, 40);

}

// 開始関数

function strClock() {

setInterval("getTime();", 1000);

}

</script>

</body>

</html>

ファイルをダブルクリックするとプログラムが実行され、WEBブラウザのキャンバス上にデジタル時計が表示されます。

プログラム解説

現在時刻を取得するロジックは前回と同じです。
19行目のgetContext('2d)は、2Dグラフィックのオブジェクトを返します。
そのオブジェクトにフォントや色を指定して、現在時刻を表示します。
22行目のclearRect()メソッドは、現在時刻を表示する前に、前回描画した時刻をクリアします。
この処理をやらないと、前回の時刻が残ったまま、現在時刻を描画してしまいます。
23行目のfillText()メソッドは、文字を表示する位置です。
第1引数が表示する値、第2引数が表示を開始するX軸、第3引数が表示を開始するY軸です。
注意点としては、Y軸は文字の下の位置を基準とするため、0にすると文字が表示されません。
最低でも文字の高さ分の値を指定する必要があります。

JavaScriptの詳しい使い方は、以下の「MDN Web Docs」を参照してください。

MDN Web Docs ～ JavaScript