JavaScriptで三角関数を使って秒針を表示しよう【初心者向け】

前回

三角関数を使って現在時刻に合わせて秒針を表示しよう

前回は三角関数を使って円の中心を始点にして円周に沿って12本の線分を表示しました。
今回は線分をアナログ時計の秒針に見立てて動かしてみましょう。
現在時刻は、Dateオブジェクトを使います。
Dateオブジェクトを使って、現在時刻を取得するやり方はこちらの記事も参照してください。

秒針の角度を計算する

秒針を1秒ごと動かすので、360÷60で6度ずつ秒針の角度を変えていきます。
また、秒針の角度は0秒は90度、15秒は0度、30秒は-90度、45秒は-180度です。
これを求める式は、以下のようになります。

90度 - 6度 × 現在秒

上記の式で、0秒の時は90度、15秒は0度、30秒は-90度、45秒は-180度となります。

時刻に合わせて秒針を動かすプログラム

以下のプログラムは、現在時刻を取得してその時刻に合わせて秒針を表示します。

<!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 line(fig,cen_x,cen_y,r,thick,color) {
      // 現在時刻を取得
      var now = new Date();

      // 秒針の角度を計算
      var angle = Math.round(90 - 6 * now.getSeconds());

      // 円周側の座標を取得
      var pos_x = Math.cos(angle*(Math.PI/180))*r;
      var pos_y = Math.sin(angle*(Math.PI/180))*r;

      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,x,y,r,start,end,mode,color,thick) {
      fig.beginPath();                      // 新しいパスを作成
      fig.arc(x,y,r,start,end);             // 円を描画
      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,CEN_X,CEN_Y,180,0,Math.PI*2,"stroke","red",10);

      // 円の塗りつぶし
      circle(fig,CEN_X,CEN_Y,180,0,Math.PI*2,"fill",  "pink");

      // 秒針描画
      line(fig,CEN_X,CEN_Y,180,5,"blue");
    }

    // 開始関数
    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 line(fig,cen_x,cen_y,r,thick,color) {

// 現在時刻を取得

var now = new Date();

// 秒針の角度を計算

var angle = Math.round(90 - 6 * now.getSeconds());

// 円周側の座標を取得

var pos_x = Math.cos(angle*(Math.PI/180))*r;

var pos_y = Math.sin(angle*(Math.PI/180))*r;

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,x,y,r,start,end,mode,color,thick) {

fig.beginPath(); // 新しいパスを作成

fig.arc(x,y,r,start,end); // 円を描画

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,CEN_X,CEN_Y,180,0,Math.PI*2,"stroke","red",10);

// 円の塗りつぶし

circle(fig,CEN_X,CEN_Y,180,0,Math.PI*2,"fill", "pink");

// 秒針描画

line(fig,CEN_X,CEN_Y,180,5,"blue");

}

// 開始関数

function strClock() {

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

}

</script>

</body>

</html>

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

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

MDN Web Docs ～ JavaScript

次回

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