这几天写HTML5作业，做网页做恶心了闲暇时间做了个时钟玩玩，代码需要的可以自取，不能说有多么精妙，但只有不断进步才是最好。
<!doctype html>
<html><head>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="500" height="500" >
您的浏览器不支持canvas标签，无法看到时钟
</canvas>
<script>
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
function drawClock(){
cxt.clearRect(0,0,500,500);
var now=new Date();
var sec=now.getSeconds();
var min=now.getMinutes();
var hour=now.getHours();
hour=hour+min/60;
hour=hour>12?hour-12:hour;
cxt.beginPath();
cxt.lineWidth=5;
cxt.strokeStyle="blue";
cxt.arc(250,250,200,0,2*Math.PI,false);
cxt.stroke();
cxt.closePath();
for(var i=0;i<12;i++){
cxt.beginPath();
cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth=5;
cxt.translate(250,250);
cxt.rotate(i*30*Math.PI/180);
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.restore();
cxt.closePath();
}
for(var i=0;i<60;i++){
cxt.beginPath();
cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth=3;
cxt.translate(250,250);
cxt.rotate(i*6*Math.PI/180);
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.restore();
cxt.closePath();
}
cxt.beginPath();
cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth=5;
cxt.translate(250,250);
cxt.rotate(hour*30*Math.PI/180);
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.stroke();
cxt.restore();
cxt.closePath();
cxt.beginPath();
cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth=3;
cxt.translate(250,250);
cxt.rotate(min*6*Math.PI/180);
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.stroke();
cxt.restore();
cxt.closePath();
cxt.beginPath();
cxt.save();
cxt.strokeStyle="red";
cxt.lineWidth=1.5;
cxt.translate(250,250);
cxt.rotate(sec*6*Math.PI/180);
cxt.moveTo(0,-168);
cxt.lineTo(0,20);
cxt.stroke();
cxt.restore();
cxt.closePath();
cxt.beginPath();
cxt.strokeStyle="red";
cxt.fillStyle="#bbb";
cxt.lineWidth=2;
cxt.arc(250,250,5,0,2*Math.PI,false);
cxt.stroke();
cxt.fill();
cxt.restore();
cxt.closePath();
cxt.beginPath();
cxt.save();
cxt.strokeStyle="red";
cxt.lineWidth=2;
cxt.translate(250,250);
cxt.rotate(sec*6*Math.PI/180);
cxt.arc(0,-150,5,0,2*Math.PI,false);
cxt.stroke();
cxt.fill();
cxt.restore();
cxt.closePath();
cxt.beginPath();
cxt.fillStyle="red";
cxt.font="30px 楷体"
cxt.fillText("焦作时间",200,320);
cxt.closePath();
}
setInterval(drawClock,1000)
</script>
</body>
</html>