JAVASCRIPT PROGRAM

JavaScriptで三角関数を使ってアナログ時計(時字付)を作成しよう【初心者向け】

アナログ時計に時字を表示しよう

前回はアナログ時計に1分単位の目盛りを追加しました。
今回は前回のアナログ時計の盤面に、時字(ときじ)を表示してみましょう。

時字の表示のやり方

JavaScriptのcanvas上に文字を表示するには、fillText()かstrokeText()を使います。
この二つの違いは、テキストを塗りつぶすか輪郭として描画するかです。

fillText(文字列, X座標, Y座標 [, 最大幅])指定したX座標、Y座標にテキストを塗りつぶして描画。
strokeText(文字列, X座標, Y座標 [, 最大幅])指定したX座標、Y座標にテキストの輪郭を描画。

今回のアナログ時計を構成している円は背景を塗り潰しているので、fillText()で文字を表示しようとすると、円の背景色に塗り潰されて消えてしまいます。
そのため、今回は時字の描画には、strokeText()を使います。
また、文字を表示する時に指定する座標は、左下を基準にします。(下図の赤丸の位置)
文字を表示したい座標の中心(下図の赤丸の位置)に置きたいので、文字サイズの半分のサイズをX座標は左(マイナス)に、Y座標は下(プラス)にずらします。
今回は1文字を24ポイントにしているので、時字が1桁(1~9)の場合は12ポイント、2桁(10~12)の場合は24ポイントずらします。

analogclock4-1

アナログ時計に時字を表示するプログラム

アナログ時計に時字を表示するプログラムは、以下のようになります。
時字の表示位置は、あらかじめ配列として定義しておきます。


ファイルをダブルクリックするとプログラムが実行され、WEBブラウザ上にアナログ時計が表示されます。

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

-JAVASCRIPT, PROGRAM
-