アナログ時計を表示する

説明

Firefox 1.5以降、Safari 2以降、Opera 9以降ではタグにより自由にグラフィックの描画を行うことができます。タグにはwidth属性、height属性を指定して描画サイズを指定します。指定しないとブラウザによっては描画結果が異なることがあります。用意したキャンバスに描画を行うにはgetContext("2d")として平面に描画するためのオブジェクトを取得します。このオブジェクトに対してdrawImage()で指定したURLの画像を描画します。アナログ時計の場合、時計の背面板、針などの画像をPNG形式で個別に用意しdrawImage()で順番に描画していきます。
針の表示位置はtranslate()を使います。translate()では描画するための原点が移動します。針の回転はrotate()を使います。このrotate()のパラメータは回転角度はラジアンで指定します。rotate()指定すると、それ以後に描画される図形や画像は、全て指定した角度だけ回転した状態で描画されます。
移動や回転を行うと描画角度や原点がずれてしまうためsave()を使って描画前の描画面に関する情報を保存します。保存した情報を元に戻すにはrestore()を使います。
JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>アナログ時計を表示する</h1>
<canvas id="clock" width="128" height="128"></canvas>
</body>
</html>
window.onload = function(){
canvasObj = document.getElementById("clock");
conObj = canvasObj.getContext("2d");
setInterval("imageClock.timeImage()", 1000);
}
var imageClock = {
timeImage : function(){
var dateObj = new Date();
var H = dateObj.getHours() % 12;
var M = dateObj.getMinutes();
var S = dateObj.getSeconds();
conObj.drawImage(imgBaseObj,0,0);
this.draw(H*30, imgHObj);
this.draw(M*6, imgMObj);
this.draw(S*6, imgSObj);
conObj.drawImage(imgCenterObj,56,56);
},
draw : function(n, img){
conObj.save();
conObj.translate(64,64);
conObj.rotate((180+n) * Math.PI / 180);
conObj.drawImage(img,0,0);
conObj.restore();
}
}
imgBaseObj = new Image(128,128);
imgBaseObj.src = "images/clock.png";
imgCenterObj = new Image(16,17);
imgCenterObj.src = "images/pin.png";
imgHObj = new Image(3,64);
imgHObj.src = "images/h.png";
imgMObj = new Image(3,64);
imgMObj.src = "images/m.png";
imgSObj = new Image(3,64);
imgSObj.src = "images/s.png";