<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5實戰</title>
<style>
*{padding: 0; margin: 0;}
body{background: #000;}
canvas{background: #fff;}
</style>
<script>
window.οnlοad=function(){
var oC = document.getElementById('canvas');
var oGC = oC.getContext('2d');
var x=200,y=200,r=150;
function draw(){
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 hourValue = (oHour*30-90 + oMin/2)*Math.PI/180;
var minValue = (oMin*6-90)*Math.PI/180;
var secValue = (oSec*6-90)*Math.PI/180;
oGC.beginPath();
for(var i=0;i<60;i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle="#fff";
oGC.beginPath();
oGC.arc(x,y,r*19/20,0,2*Math.PI,false);
oGC.closePath();
oGC.fill()
oGC.lineWidth=3;
oGC.beginPath();
for(var i=0;i<12;i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle="#fff";
oGC.beginPath();
oGC.arc(x,y,r*18/20,0,2*Math.PI,false);
oGC.closePath();
oGC.fill()
//畫時針
oGC.lineWidth=5;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*10/20,hourValue,hourValue,false);
oGC.closePath();
oGC.stroke();
//畫分針
oGC.lineWidth=3;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*14/20,minValue,minValue,false);
oGC.closePath();
oGC.stroke();
oGC.lineWidth=1;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*19/20,secValue,secValue,false);
oGC.closePath();
oGC.stroke();
}
setInterval(function(){
draw();
},1000)
}
</script>
</head>
<body>
<canvas id="canvas" width='400' height="400"></canvas>
</body>
</html>
