JAVASCRIPT PROGRAM

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

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

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

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

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

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

digitalclock2-1

プログラム解説

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

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

-JAVASCRIPT, PROGRAM
-