版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_35656188/article/details/80250531
一、HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="mycanvas"></canvas>
<script type="text/javascript">
var hb;
var damiaojiaodu;
var xiaomiaojiaodu=0;
var dafenjiaodu;
var dashijiaodu;
var h,f,m;
window.onload=function(){
var mycanvas=document.getElementById("mycanvas");
mycanvas.width=800;
mycanvas.height=300;
hb=mycanvas.getContext("2d");
hb.fillStyle="gainsboro";
hb.fillRect(0,0,800,300);
//第一个
//画扇形
// hb.save();
// hb.translate(150,150);
// hb.beginPath();
// hb.moveTo(0,0);
// hb.arc(0,0,100,Math.PI/180*270,Math.PI/180*dajiaodu);
// hb.fillStyle="indigo";
// hb.fill();
//画大圆
// hb.beginPath();
// hb.lineWidth=3;
// hb.strokeStyle="white";
// hb.arc(0,0,100,0,2*Math.PI);
// hb.stroke();
//画小圆
// hb.beginPath();
// hb.lineWidth=3;
// hb.strokeStyle="white";
// hb.arc(0,0,70,0,2*Math.PI);
// hb.stroke();
//画有填充的小圆
// hb.beginPath();
// hb.arc(0,0,69,0,2*Math.PI);
// hb.fillStyle="gainsboro";
// hb.fill();
//再画扇形
// hb.beginPath();
// hb.moveTo(0,0);
// hb.arc(0,0,69,Math.PI/180*270,Math.PI/180*xiaojiaodu);
// hb.fillStyle="#A9A9A9";
// hb.fill();
//写字
// hb.beginPath();
// hb.fillStyle="indigo";
// hb.font="50px 微软雅黑";
// hb.fillText(daojishi>=10?:" "+daojishi,-30,15);
// hb.restore();
setInterval(function(){
hb.clearRect(0,0,800,300);
hb.fillStyle="gainsboro";
hb.fillRect(0,0,800,300);
var T=gettime();
drawxiaoshi(150,"indigo",T[0]);
drawfenzhong(400,"green",T[1]);
drawmiao(650,"red",T[2]);
damiaojiaodu=6*T[2]-90;
dafenjiaodu=T[1]*6-90+T[2]*0.1;
dashijiaodu=T[0]*30-90+0.5*T[1];
xiaomiaojiaodu+=18;
// console.log(xiaomiaojiaodu)
if(xiaomiaojiaodu>=630){
xiaomiaojiaodu=0;
}
},50);
};
//秒
function drawmiao(x,color,time){
//画扇形
hb.save();
hb.translate(x,150);
hb.beginPath();
hb.moveTo(0,0);
hb.arc(0,0,100,Math.PI/180*270,Math.PI/180*damiaojiaodu);
hb.fillStyle=color;
hb.fill();
//画大圆
hb.beginPath();
hb.lineWidth=3;
hb.strokeStyle="white";
hb.arc(0,0,100,0,2*Math.PI);
hb.stroke();
//画小圆
hb.beginPath();
hb.lineWidth=3;
hb.strokeStyle="white";
hb.arc(0,0,70,0,2*Math.PI);
hb.stroke();
//画有填充的小圆
hb.beginPath();
hb.arc(0,0,69,0,2*Math.PI);
hb.fillStyle="gainsboro";
hb.fill();
//再画扇形
hb.beginPath();
hb.moveTo(0,0);
hb.arc(0,0,69,Math.PI/180*270,Math.PI/180*xiaomiaojiaodu);
hb.fillStyle="#A9A9A9";
hb.fill();
//写字
hb.beginPath();
hb.fillStyle=color;
hb.font="50px 微软雅黑";
hb.fillText(time>=10?time:"0"+time,-30,15);
hb.restore();
}
//分钟
function drawfenzhong(x,color,time){
//画扇形
hb.save();
hb.translate(x,150);
hb.beginPath();
hb.moveTo(0,0);
hb.arc(0,0,100,Math.PI/180*270,Math.PI/180*dafenjiaodu);
hb.fillStyle=color;
hb.fill();
//画大圆
hb.beginPath();
hb.lineWidth=3;
hb.strokeStyle="white";
hb.arc(0,0,100,0,2*Math.PI);
hb.stroke();
//画小圆
hb.beginPath();
hb.lineWidth=3;
hb.strokeStyle="white";
hb.arc(0,0,70,0,2*Math.PI);
hb.stroke();
//画有填充的小圆
hb.beginPath();
hb.arc(0,0,69,0,2*Math.PI);
hb.fillStyle="gainsboro";
hb.fill();
//写字
hb.beginPath();
hb.fillStyle=color;
hb.font="50px 微软雅黑";
hb.fillText(time>=10?time:"0"+time,-30,15);
hb.restore();
}
//小时
function drawxiaoshi(x,color,time){
//画扇形
hb.save();
hb.translate(x,150);
hb.beginPath();
hb.moveTo(0,0);
hb.arc(0,0,100,Math.PI/180*270,Math.PI/180*dashijiaodu);
hb.fillStyle=color;
hb.fill();
//画大圆
hb.beginPath();
hb.lineWidth=3;
hb.strokeStyle="white";
hb.arc(0,0,100,0,2*Math.PI);
hb.stroke();
//画小圆
hb.beginPath();
hb.lineWidth=3;
hb.strokeStyle="white";
hb.arc(0,0,70,0,2*Math.PI);
hb.stroke();
//画有填充的小圆
hb.beginPath();
hb.arc(0,0,69,0,2*Math.PI);
hb.fillStyle="gainsboro";
hb.fill();
//写字
hb.beginPath();
hb.fillStyle=color;
hb.font="50px 微软雅黑";
hb.fillText(time>=10?time:"0"+time,-30,15);
hb.restore();
}
function gettime(){
var time=new Date();
h=time.getHours();
f=time.getMinutes();
m=time.getSeconds();
return [h,f,m];
}
</script>
</body>
</html>
