<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/public.css"/>
<style type="text/css">
body{background: black;}
canvas{background: #fff;}
</style>
<script type="text/javascript">
window.onload=function(){
var oC=document.getElementById("oc");
var oG=oC.getContext("2d");
function draw(){
//获取当前时间
var myDate=new Date();
var hour=myDate.getHours();
var min=myDate.getMinutes();
var sec=myDate.getSeconds();
//分格
oG.clearRect(0,0,oC.width,oC.height);
oG.beginPath();
for(var i=0;i<60;i++){
oG.moveTo(300,300);
oG.arc(300,300,200,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
oG.closePath();
oG.stroke();
//覆盖
oG.beginPath();
oG.moveTo(300,300);
oG.arc(300,300,200*19/20,0,360*Math.PI/180,false);
oG.fillStyle="#fff";
oG.closePath();
oG.fill();
//时
oG.beginPath();
oG.lineWidth=3;
for(var i=0;i<12;i++){
oG.moveTo(300,300);
oG.arc(300,300,200,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
oG.closePath();
oG.stroke();
//覆盖
oG.beginPath();
oG.moveTo(300,300);
oG.arc(300,300,200*18/20,0,360*Math.PI/180,false);
oG.fillStyle="#fff";
oG.closePath();
oG.fill();
//时分秒针
oG.beginPath();
oG.lineWidth=5;
oG.moveTo(300,300);
oG.arc(300,300,200*0.5,((hour+min/60)*30-90)*Math.PI/180,((hour+min/60)*30-90)*Math.PI/180,false);
oG.closePath();
oG.stroke();
oG.beginPath();
oG.lineWidth=3;
oG.moveTo(300,300);
oG.arc(300,300,200*0.6,((min+sec/60)*6-90)*Math.PI/180,((min+sec/60)*6-90)*Math.PI/180,false);
oG.closePath();
oG.stroke();
oG.beginPath();
oG.lineWidth=1;
oG.moveTo(300,300);
oG.arc(300,300,200*0.8,(sec*6-90)*Math.PI/180,(sec*6-90)*Math.PI/180,false);
oG.closePath();
oG.stroke();
}
draw();
setInterval(draw,1000);
}
</script>
</head>
<body>
<canvas id="oc" width="600" height="600"></canvas>
</body>
</html>
