JavaScriptで三角関数を使ってアナログ時計(時字付)を作成しよう【初心者向け】
今回のアナログ時計を構成している円は背景を塗り潰しているので、fillText()で文字を表示しようとすると、円の背景色に塗り潰されて消えてしまいます。そのため、今回は時字の描画には、strokeText()を使います。また、文字を表示する時に指定する座標は、左下を基準にします。(下図の 赤丸 の位置)文字を表示したい座標の中心(下図の 赤丸 の位置)に置きたいので、文字サイズの半分のサイズをX座標は左(マイナス)に、Y座標は下(プラス)にずらします。今回は1文字を24ポイントにしているので、時字が1桁(1～9)の場合は12ポイント、2桁(10～12)の場合は24ポイントずらします。
アナログ時計に時字を表示するプログラム
analogclock4-1.html JavaScript const CEN_X = 200 ; const CEN_Y = 200 ; const SEMICIRCLE = 180 ; function needle ( fig ) < var now = new Date ( ) ; var angle_h = Math . round ( 90 - 30 * now . getHours ( ) - 0.5 * now . getMinutes ( ) ) ; // 短針 var angle_m = Math . round ( 90 - 6 * now . getMinutes ( ) ) ; // 長針 var angle_s = Math . round ( 90 - 6 * now . getSeconds ( ) ) ; // 秒針 var pos_hx = Math . cos ( angle_h * ( Math . PI /SEMICIRCLE))*120; var pos_hy = Math.sin(angle_h*(Math.PI/S EMICIRCLE ) ) * 120 ; var pos_mx = Math . cos ( angle_m * ( Math . PI /SEMICIRCLE))*160; var pos_my = Math.sin(angle_m*(Math.PI/S EMICIRCLE ) ) * 160 ; var pos_sx = Math . cos ( angle_s * ( Math . PI /SEMICIRCLE))*150; var pos_sy = Math.sin(angle_s*(Math.PI/S EMICIRCLE ) ) * 150 ; line ( fig , pos_hx , pos_hy , 12 , "red" ) ; line ( fig , pos_mx , pos_my , 8 , "green" ) ; line ( fig , pos_sx , pos_sy , 3 , "blue" ) ; function memory ( fig ) < for ( angle = 0 ; angle < 360 ; angle += 6 ) < if ( angle % 30 == 0 ) < fig . lineWidth = 5 ; var mark_i_x = Math . cos ( angle * ( Math . PI /SEMICIRCLE))*160; var mark_i_y = Math.sin(angle*(Math.PI/S EMICIRCLE ) ) * 160 ; fig . lineWidth = 2 ; var mark_i_x = Math . cos ( angle * ( Math . PI /SEMICIRCLE))*170; var mark_i_y = Math.sin(angle*(Math.PI/S EMICIRCLE ) ) * 170 ; var mark_o_x = Math . cos ( angle * ( Math . PI /SEMICIRCLE))*180; var mark_o_y = Math.sin(angle*(Math.PI/S EMICIRCLE ) ) * 180 ; fig . beginPath ( ) ; // 新しいパスを作成 fig . moveTo ( CEN_X + mark_i_x , CEN_Y - mark_i_y ) ; // 線の開始座標 fig . lineTo ( CEN_X + mark_o_x , CEN_Y - mark_o_y ) ; // 線の終了座標 fig . stroke ( ) ; // 線を描画 function line ( fig , pos_x , pos_y , thick , color ) < fig . beginPath ( ) ; // 新しいパスを作成 fig . lineWidth = thick ; // 線の太さ fig . strokeStyle = color ; // 線の色 fig . moveTo ( CEN_X , CEN_Y ) ; // 線の開始座標 fig . lineTo ( CEN_X + pos_x , CEN_Y - pos_y ) ; // 線の終了座標 fig . stroke ( ) ; // 線を描画 function number ( fig ) < fig . font = "24pt メイリオ" ; for ( angle = 0 ; angle < 360 ; angle += 30 ) < if ( arr [ angle ] < 10 ) < var mark_x = Math . cos ( angle * ( Math . PI / SEMICIRCLE ) ) * 140 + 200 - 12 ; var mark_x = Math . cos ( angle * ( Math . PI /SEMICIRCLE))*140+200-24; var mark_y = Math.sin(angle*(Math.PI/S EMICIRCLE ) ) * 140 + 200 + 12 ; fig . strokeStyle = "darkorange" ; // 時字の色 fig . lineWidth = 3 ; // 時字の太さ fig . strokeText ( arr [ angle ] , mark_x , mark_y ) ; // 時字を描画 function circle ( fig , mode , color , thick ) < fig . beginPath ( ) ; // 新しいパスを作成 fig . arc ( CEN_X , CEN_Y , 180 , 0 , Math . PI * 2 ) ; // 円を描画 fig . closePath ( ) ; // パスの終了 if ( mode == "fill" ) < fig . fillStyle = color ; // 塗りつぶす色 > else if ( mode == "stroke" ) < fig . strokeStyle = color ; // 線の色 fig . lineWidth = thick ; // 線の太さ fig . stroke ( ) ; function strDraw ( ) < // ドキュメントオブジェクト作成 var id1 = document . getElementById ( 'pos' ) ; // 2Dオブジェクト作成 var fig = id1 . getContext ( '2d' ) ; fig . clearRect ( 0 , 0 , 400 , 400 ) ; circle ( fig , "stroke" , "gold" , 10 ) ; circle ( fig , "fill" , "lightyellow" ) ; memory ( fig ) ; number ( fig ) ; needle ( fig ) ; function strClock ( ) < setInterval ( "strDraw();" , 100 ) ;JavaScriptの詳しい使い方は、以下の「MDN Web Docs」を参照してください。
関連記事 Pygame超入門【第47回 三角関数を使った星型軌道】三角関数を使って物体が星型を描くように動かそう 今回は物体が星型を描くように動かしてみましょう。 以下の図のように、星型の枠に沿って物体が移動します。 角度は252度→18 .
初心者のためのPython超入門【第24回 カレンダー①】Pythonでカレンダーを表示しよう Pythonでカレンダーを表示するためには、calendarライブラリーを使います。 これは、UNIXのcalコマンドのようなカレンダ .
tkinter超入門【第12回 チェックボタン①】Checkbuttonウィジェットを使ってみよう 今回はCheckbuttonウィジェットを使って、チェックボタンを表示してみましょう。 一般的にはチェックボックスといった .
Pygame超入門【第33回 三角関数を使ったアナログ時計④】アナログ時計に時字と目盛りを表示しよう 今回は時字と目盛りを両方表示させましょう。 目盛りは正時(1時、2時のように分や秒の端数のない時間)の位置を目立つようにしています。 .
Pygame超入門【第21回 写真ノイズ処理】写真にノイズを発生させてみよう 今回は写真にノイズを発生させてみましょう。 RGBの各値をランダムで書き替えます。 ランダムの値の範囲を変えると、ノイズの発生具合も変わりま .
IT技術者。C言語、JavaScript、Visual Basicなどのプログラミングを経験後、UNIX系のインフラ(サーバー、ストレージの構築)を担当。 趣味は旅行、写真撮影、音楽鑑賞、野球観戦、TVゲームなど。 最近は昔のSF小説を再読中。
新着記事一覧 ASP.NET(C#) MVCモデル入門～同一処理を共通化する重複する処理を共通化したプログラム 前回までで、MVCモデルによる登録、更新、削除処理の作成が完了しました。ただし、前回までのプログラムでは、更新処理と削除処理で作成した DataFind()メソッド .