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

前回

三角関数を使ってアナログ時計を作成しよう

前回は現在時刻に合わせて、秒針を表示するやり方を説明しました。
今回は長針と短針も表示して、アナログ時計を作成しましょう。

短針(時)の角度を計算する

秒針は1秒毎に6度ずつ針の角度を変更しました。
長針(分)も0分から59分まであるので、360÷60で1分毎に6度ずつ針を動かします。
短針(時)の場合は、0(12)時から11時まであるので、360÷12で1時間毎に30度ずつ針を動かすことになります。
ただし、短針は1時間毎に30度動かすのではなく、1分ごとに少しずつ針を動かすようにします。
60分で1時間なので、30度÷60分で短針は1分間で0.5度ずつ動かしていきます。
短針を1分ごとに動かす式は、以下のようになります。

90度－ 30度 × 現在時(hour) － 0.5度 × 現在分(minute)

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

アナログ時計を表示するプログラムは、以下の通りです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Clock</title>
</head>
<body onload="strClock();">
  <canvas id="pos" width="400" height="400"></canvas>
  <script type="text/javascript">
    // 定数
    const CEN_X = 200;
    const CEN_Y = 200;

    // 針表示関数
    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/180))*120;
      var pos_hy = Math.sin(angle_h*(Math.PI/180))*120;
      var pos_mx = Math.cos(angle_m*(Math.PI/180))*160;
      var pos_my = Math.sin(angle_m*(Math.PI/180))*160;
      var pos_sx = Math.cos(angle_s*(Math.PI/180))*150;
      var pos_sy = Math.sin(angle_s*(Math.PI/180))*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 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 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;              // 塗りつぶす色
        fig.fill();

      // 輪郭描画
      } 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");

      // 針描画
      needle(fig);
    }

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

<!DOCTYPE html>

<html>

<head>

<title>Clock</title>

</head>

// 定数

const CEN_X = 200;

const CEN_Y = 200;

// 針表示関数

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/180))*120;

var pos_hy = Math.sin(angle_h*(Math.PI/180))*120;

var pos_mx = Math.cos(angle_m*(Math.PI/180))*160;

var pos_my = Math.sin(angle_m*(Math.PI/180))*160;

var pos_sx = Math.cos(angle_s*(Math.PI/180))*150;

var pos_sy = Math.sin(angle_s*(Math.PI/180))*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 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 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; // 塗りつぶす色

fig.fill();

// 輪郭描画

} 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");

// 針描画

needle(fig);

}

// 開始関数

function strClock() {

setInterval("strDraw();",100);

}

</script>

</body>

</html>

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

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

MDN Web Docs ～ JavaScript

次回

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