<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
#cvs{
margin: 100px 200px;
}
</style>
</head>
<body>
<canvas id="cvs" width="400px" height="400"></canvas>
</body>
<script>
var cvs=document.getElementById("cvs");
var ctx=cvs.getContext("2d");
function tt (){
//外层圆
ctx.beginPath();
ctx.lineWidth=4;
ctx.arc(200,200,150,0,2*Math.PI,false);
ctx.strokeStyle="#ddd";
ctx.stroke()
ctx.closePath();
// 秒针盘
ctx.beginPath();
ctx.lineWidth=3;
for(var i=0;i<60;i++){
ctx.moveTo(200,200);
ctx.arc(200,200,150,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
ctx.strokeStyle="#ddd";
ctx.stroke();
ctx.closePath;
//覆盖圆
ctx.beginPath();
ctx.lineWidth=4;
ctx.arc(200,200,144,0,2*Math.PI,false);
ctx.fillStyle="#fff";
ctx.fill()
ctx.closePath();
// 时针盘
ctx.beginPath();
ctx.lineWidth=5;
for(var i=0;i<12;i++){
ctx.moveTo(200,200);
ctx.arc(200,200,150,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
ctx.strokeStyle="#dd0";
ctx.stroke();
ctx.closePath;
//覆盖圆
ctx.beginPath();
ctx.lineWidth=4;
ctx.arc(200,200,140,0,2*Math.PI,false);
ctx.fillStyle="#fff";
ctx.fill();
ctx.closePath();
var Odate=new Date();
var Ohours=Odate.getHours();
var Omiunties=Odate.getMinutes();
var Oseconds=Odate.getSeconds();
var h=(-90+Ohours*30+Omiunties/2)*Math.PI/180;
var m=(-90+Omiunties*6)*Math.PI/180;
var s=(-90+Oseconds*6)*Math.PI/180;
//时针
ctx.beginPath();
ctx.lineWidth=7;
ctx.moveTo(200,200)
ctx.arc(200,200,70,h,h,false);
ctx.strokeStyle="yellow";
ctx.stroke();
ctx.closePath();
//分针
ctx.beginPath();
ctx.lineWidth=5;
ctx.moveTo(200,200)
ctx.arc(200,200,80,m,m,false);
ctx.strokeStyle="green";
ctx.stroke();
ctx.closePath();
//秒针
ctx.beginPath();
ctx.lineWidth=4;
ctx.moveTo(200,200)
ctx.arc(200,200,90,s,s,false);
ctx.strokeStyle="red";
ctx.stroke();
ctx.closePath();
//圆心
ctx.beginPath();
ctx.arc(200,200,5,0,2*Math.PI,false);
ctx.fillStyle="pink";
ctx.fill();
ctx.closePath();
//表盘刻字
ctx.beginPath();
ctx.fillStyle="#d00";
ctx.fillText("1",255,100);
ctx.fillText("2",305,145);
ctx.fillText("3",320,210);
ctx.fillText("4",305,270);
ctx.fillText("5",255,315);
ctx.fillText("6",195,330);
ctx.fillText("7",130,315);
ctx.fillText("8",90,270);
ctx.fillText("9",70,207);
ctx.fillText("10",90,140);
ctx.fillText("11",130,100);
ctx.fillText("12",190,85);
ctx.font="18px 微软雅黑"
}
tt();
setInterval(tt,1000)
</script>
</html>