<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 420px;
margin: 50px auto 0;
}
#cav{
background:#F2E7E7;
}
</style>
</head>
<body>
<div > function clock(){
var img=new Image();
ctx.closePath();
//时针
ctx.save();
ctx.translate(210,210);//把画布的原点移到圆的原点处
ctx.rotate(30*h*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,15);
ctx.lineTo(0,-130);
ctx.closePath();
ctx.strokeStyle='#29B2D9';
ctx.lineWidth=10;
ctx.stroke();
ctx.restore();
//分针
ctx.save();
ctx.translate(210,210);//把画布的原点移到圆的原点处
ctx.rotate(6*m*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,15);
ctx.lineTo(0,-150);
ctx.closePath();
ctx.strokeStyle='#D859A1';
ctx.lineWidth=5;
ctx.stroke();
ctx.restore();
//秒针
ctx.save();
ctx.translate(210,210);//把画布的原点移到圆的原点处
ctx.rotate(6*s*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,15);
ctx.lineTo(0,-170);
ctx.strokeStyle='#D01B5A';
ctx.lineWidth=3;
ctx.stroke();
ctx.closePath();
//秒针底部的圆圈
ctx.beginPath();
ctx.arc(0,0,8,0,2*Math.PI,true);
ctx.fillStyle='#D859A1';
ctx.strokeStyle='#D01B5A';
ctx.lineWidth=3;
ctx.stroke();
ctx.fill();
ctx.closePath();
//秒针顶部的圆
ctx.beginPath();
ctx.arc(0,-155,4,0,2*Math.PI,true);
ctx.fillStyle='#D859A1';
ctx.strokeStyle='#D01B5A';
ctx.lineWidth=3;
ctx.stroke();
ctx.fill();
ctx.closePath();
ctx.restore();
}
</script>
</body>
</html>
效果图: