[HTML5] Canvasでアナログ時計を作ってみた

HTML5のCanvasを使って、アナログ時計を実装しました。
このページ右上に表示されている（はずの）アナログ時計がそれです。
CanvasではビットマップイメージをJavaScriptで描画する事が可能で、 JavaScriptのタイマーで定期的に描画することで時計の針が動く様子を再現しました。
時計の文字盤や針の描画点を計算するのに、ちょっとだけサイン／コサインを利用しました。
これくらいの小さな領域を1秒毎に描画し直すくらいの負荷なら、 どのデバイスでも動きそうな気がします。
以下にソースコードも公開したいと思います。

<!-- アナログ時計の表示領域  -->
<div style="width:100%; text-align:center;">
  <canvas id="myCanvas" width="100px" height="100px" style="background-color:#ffffff;">
  </canvas>
</div>
<script type="text/javascript">
// 時計を描画する関数。
// 定期的に呼び出すことで、アナログ時計の動きを表現する。
var drawClock = function(){

  // 各種情報を変数に格納する。
  var canvas = document.getElementById("myCanvas");
  var c      = canvas.getContext("2d");
  var w      = canvas.width;
  var h      = canvas.height;
  var center = {x : w / 2, y : h / 2};
  var lw     = w * 0.8 / 2; // needle width.

  // Canvasの色やフォントを指定する。
  c.fillStyle   = "#000000";
  c.strokeStyle = "#000000";
  c.font        = "10px 'ＭＳ Ｐゴシック'";

  // Canvasに表示している内容をクリアする。
  c.clearRect(0, 0, w, h);

  // 時計盤の文字列を描画する。
  for (var i = 0; i < 12; i++) {
    var radian = (360 / 12) * i * Math.PI / 180;
    var x = center.x + lw * Math.sin(radian);
    var y = center.y - lw * Math.cos(radian);
    var text = "" + (i == 0 ? "12" : i);
    c.fillText(text, x, y);
  }

  // 時計の針を描画する。
  // 現在時刻を取得して、針の角度(radian)を求める。
  var now = new Date();
  var hh = now.getHours();
  var mm = now.getMinutes();
  var ss = now.getSeconds();
  var hh_radian = (360 * hh / 12 + ((360 / 12) * mm / 60)) * Math.PI / 180;
  var mm_radian = (360 * mm / 60 + ((360 / 60) * ss / 60)) * Math.PI / 180;
  var ss_radian = (360 * ss / 60) * Math.PI / 180;

  // 求めた角度から線を引く座標を計算する。
  var pos_h = _calcPoint(center, (lw * 0.75), hh_radian);
  var pos_m = _calcPoint(center, lw, mm_radian);
  var pos_s = _calcPoint(center, lw, ss_radian);

  // 時針を描画する。
  c.beginPath();
  c.moveTo(center.x, center.y);
  c.lineTo((pos_h.x), (pos_h.y));
  c.stroke();
  
  // 分針を描画する。
  c.beginPath();
  c.moveTo(center.x, center.y);
  c.lineTo(pos_m.x, pos_m.y);
  c.stroke();

  // 秒針を描画する。
  // 秒針は赤色にしてみた。
  c.strokeStyle = "#ff0000";
  c.beginPath();
  c.moveTo(center.x, center.y);
  c.lineTo(pos_s.x, pos_s.y);
  c.stroke();

}

// 始点、長さ、角度から針の先端の座標を計算する。
var _calcPoint = function(center, lineWidth, radian) {
  var pos = {
    x : center.x + lineWidth * Math.sin(radian), 
    y : center.y - lineWidth * Math.cos(radian)
  };
  return pos;
}

// アナログ時計を描画する処理を1000ミリ秒毎に
// 実行するように設定する。
window.addEventListener("load", function(){
  setInterval(drawClock, 1000);
  }, false);

</script>

最後に

CanvasでWeb上に簡単に絵を描けるのはやっぱり楽しいですね。
次もCanvasで何か制作出来れば良いなぁ。♪(´ε｀ )