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

HTML5のCanvasという描画機能を使って、アナログ時計を作成してみました。
http://www.yoheim.net/のトップページ右側に表示されます。

ページに時計があるページを見て、自分も欲しいとおもい作成しました。
コードは以下です。コード量80行弱とそんなに多くなく出来ました(*´∇｀*)

<div style="width:100%; text-align:center;">
  <canvas id="myCanvas" width="100px" height="100px" style="background-color:black;">
  </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 - 3, y : h / 2 + 3};
  var lw = canvas.width * 0.8 / 2; // draw Area width.

  // initialize variables.
  c.fillStyle = "#ffffff";
  c.strokeStyle = "#ffffff";
  c.font = "10px 'ＭＳ Ｐゴシック'";

  // clear canvas.
  c.clearRect(0, 0, w, h);

  // draw numbers.
  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);
    // alert(text + ", " + x + ", " + y);
    c.fillText(text, x, y);
  }

  // draw needles.
  var now = new Date();
  var hh = now.getHours() - 1;
  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, hh_radian);
  var pos_m = _calcPoint(center, lw, mm_radian);
  var pos_s = _calcPoint(center, lw, ss_radian);

  // hour
  c.beginPath();
  c.moveTo(center.x, center.y);
  c.lineTo(pos_h.x * 0.8, pos_h.y * 0.8);
  c.stroke();
  
  // minute
  c.beginPath();
  c.moveTo(center.x, center.y);
  c.lineTo(pos_m.x, pos_m.y);
  c.stroke();

  // second
  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;
}


window.addEventListener("load", function(){
  setInterval(drawClock, 1000);
}, false);
</script>

最後に

ちょっと変なところもあるけど、いったんこれでいいかな。また改善しよう。
HTML5って色々な事が出来て面白いですね。次は何が作れるかなぁ(｀・ω・´)