原文 http://www.cnblogs.com/angelatian/p/6113051.html
結合博主文章做了相關優化，減少部分重複代碼；
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<title> html5 Canvas 繪製時鐘 </title>
<meta name="Author" content="cloud">
<meta name="Keywords" content="html5 Canvas 繪製時鐘">
<meta name="Description" content="html5 Canvas 繪製時鐘">
<title>Document</title>
<style type = "text/css">
#c1{
display:block;
margin: 50px auto;
}
</style>
</head>
<body>
<!-- 時鐘 Canvas S -->
<canvas id="c1" width="800px" height="800px">
<span>不支持canvas瀏覽器</span>
</canvas>
<!-- 時鐘 Canvas E -->
</body>
<!-- canvas 時鐘腳本 S -->
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
function toDraw(){
var a = 400;
var b = 400;
var r = 200;
oGC.clearRect(0, 0, oC.width, oC.height);
//獲取時間
var oDate = new Date();
var oHour = oDate.getHours();
var oMin = oDate.getMinutes();
var oSec = oDate.getSeconds();
var PI = Math.PI / 180;
var oHourvalue = (-90 + oHour * 30 + oMin / 2 ) * PI;
var oMinvalue = (-90 + oMin * 6 ) * PI;
var oSecvalue = (-90 + oSec * 6 ) * PI;
//繪製秒的刻度
DRAW_SECONDS_SCALE(oGC, a, b, r, PI);
//繪製分的刻度
DRAW_MINUTES_SCALE(oGC, a, b, r, PI);
//繪製時針
oGC.lineWidth = 4;
guiding_principle(oGC, a, b, r * 14.5 / 20, oHourvalue);
//繪製分針
oGC.lineWidth = 2;
guiding_principle(oGC, a, b, r * 16.5 / 20, oMinvalue);
//繪製秒針
oGC.lineWidth = 1.5;
guiding_principle(oGC, a, b, r * 18.5 / 20, oSecvalue);
};
setInterval(toDraw,1000);
};
//繪製秒的刻度
function DRAW_SECONDS_SCALE(oGC, a, b, r, PI){
oGC.beginPath();
for(var i = 0; i < 60; i++){
oGC.moveTo(a, b);
oGC.arc(a, b, r, 6 * i * PI, 6 * (i + 1) * PI,false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle = 'white';
oGC.beginPath();
oGC.moveTo(a,b);
oGC.arc(a, b, r * 19 / 20, 0, 360 * PI ,false);
oGC.closePath();
oGC.fill();
}
//繪製分的刻度
function DRAW_MINUTES_SCALE(oGC, a, b, r, PI){
oGC.lineWidth = 3;
oGC.beginPath();
for(var i = 0; i < 12; i++){
oGC.moveTo(a, b);
oGC.arc(a, b, r, 30 * i * PI, 30 * ( i+ 1) * PI, false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle = 'white';
oGC.beginPath();
oGC.moveTo(a, b);
oGC.arc(a, b, r * 17 / 20, 0, 360 * PI, false);
oGC.closePath();
oGC.fill();
}
// 繪製指針
function guiding_principle(oGC, a, b, r, oSecvalue){
oGC.beginPath();
oGC.moveTo(a,b);
oGC.arc(a, b, r, oSecvalue, oSecvalue, false);
oGC.closePath();
oGC.stroke();
}
</script>
<!-- canvas 時鐘腳本 E -->
</html>