<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="text" height="400" width="400"></canvas>
</body>
<style>
#text{
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
position: absolute;
background: gray;
}
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
background: pink;
}
</style>
<script type="text/javascript">
window.onload=function () {
var canvas=document.getElementById("text");
if (canvas.getContext){
var ctx=canvas.getContext("2d");
setInterval(function () {
ctx.clearRect(0,0,canvas.width,canvas.height)
moo();
},1000);
function moo() {
ctx.save();
ctx.lineWidth=8;
ctx.strokeStyle="black";
ctx.lineCap="round";
ctx.translate(200,200);
ctx.rotate(-90*Math.PI/180);
ctx.beginPath();
//外层空心圆盘
ctx.save();
ctx.strokeStyle="blue";
ctx.lineWidth=14;
ctx.beginPath();
ctx.arc(0,0,140,0,360*Math.PI/180);
ctx.stroke();
ctx.restore();
//时针刻度
ctx.save();
for (var i=0;i<12;i++){
ctx.rotate(30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(100,0);
ctx.lineTo(120,0);
ctx.stroke();
}
ctx.restore();
//分针刻度
ctx.save();
ctx.lineWidth=4
for (var i=0;i<60;i++){
if (i%5!=0){
ctx.beginPath();
ctx.moveTo(117,0);
ctx.lineTo(120,0);
ctx.stroke();
}
ctx.rotate(6*Math.PI/180);
}
ctx.restore();
//时针，分针，秒针，表座
var date= new Date();
var s=date.getSeconds();
var m=date.getMinutes()+s/60;
var h=date.getHours()+m/60;
h=h>12?h-12:h;
//时针
ctx.save();
ctx.lineWidth=14;
ctx.rotate(h*30* Math.PI/180);
ctx.beginPath();
ctx.moveTo(-20,0);
ctx.lineTo(80,0);
ctx.stroke();
ctx.restore();
//分针
ctx.save();
ctx.lineWidth=10;
ctx.rotate(m*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(-28,0);
ctx.lineTo(112,0);
ctx.stroke();
ctx.restore();
//秒针
ctx.save();
ctx.lineWidth=6;
ctx.strokeStyle="red";
ctx.fillStyle="red"
ctx.rotate(s*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(-30,0);
ctx.lineTo(83,0);
ctx.stroke();
//表座
ctx.beginPath();
ctx.arc(0,0,10,0,360*Math.PI/180);
ctx.fill();
//表头
ctx.beginPath();
ctx.arc(96,0,10,0,360*Math.PI/180);
ctx.stroke();
ctx.restore();
ctx.restore();
}
}
}
</script>
</html>
