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