<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
*{margin:0; padding:0; list-style:none;}
.box{
width: 420px;
height: 420px;
margin: 50px auto 0;
}
#cvs{
background: #B1A6BE;
}
</style>
</head>
<body>
<div class="box">
<canvas id="cvs" width="420" height="420"></canvas>
</div>
<script>
var cvs=document.getElementById('cvs');
var ctx=cvs.getContext('2d');
clock();
setInterval(clock,1000);
function clock(){
var img=document.createElement('img');
img.src='01.jpg';
//时钟背景图
// img.onload=function (){
ctx.beginPath();
ctx.drawImage(img,0,0,420,420);
ctx.closePath();
// }
//时钟外圆
ctx.beginPath();
ctx.arc(210,210,200,0,2*Math.PI,true);
ctx.strokeStyle='#60D9F8';
ctx.lineWidth=10;
ctx.stroke();
ctx.clip();
ctx.closePath();
//分刻度 360/60=6
for (var i = 0; i < 60; i++) {
ctx.save();//保存状态
ctx.beginPath();
ctx.translate(210,210);
ctx.rotate(i*6*Math.PI/180);
ctx.strokeStyle='#FEF319';
ctx.lineWidth=5;
ctx.moveTo(0,-185);
ctx.lineTo(0,-195);
ctx.stroke();
ctx.closePath();
ctx.restore();//恢复之前保存的状态
};
//时刻度 360/12=30
for (var i = 0; i < 12; i++) {
ctx.save();//保存状态
ctx.beginPath();
ctx.translate(210,210);
ctx.rotate(i*30*Math.PI/180);
ctx.strokeStyle='#60D9F8';
ctx.lineWidth=8;
ctx.moveTo(0,-175);
ctx.lineTo(0,-195);
ctx.stroke();
ctx.closePath();
ctx.restore();//恢复之前保存的状态
};
//获取当前时间
var dates=new Date();
var h=dates.getHours();
var m=dates.getMinutes();
var s=dates.getSeconds();
h=h+m/60;//12.5小时
m=m+s/60;
//画时间
var h2=dates.getHours();
var m2=dates.getMinutes();
var str1=h2>9?h2:'0'+h2;
var str2=m2>9?m2:'0'+m2;
var str=str1+':'+str2;// 09:05
ctx.beginPath();
ctx.font='26px 微软雅黑';
ctx.fillStyle='#5BDA40';
ctx.fillText(str,180,340);
ctx.closePath();
//时针
ctx.save();//保存状态
ctx.beginPath();
ctx.translate(210,210);
ctx.rotate(h*30*Math.PI/180);
ctx.strokeStyle='#60D9F8';
ctx.lineWidth=8;
ctx.moveTo(0,14);
ctx.lineTo(0,-130);
ctx.stroke();
ctx.closePath();
ctx.restore();//恢复之前保存的状态
//分针
ctx.save();//保存状态
ctx.beginPath();
ctx.translate(210,210);
ctx.rotate(m*6*Math.PI/180);
ctx.strokeStyle='#FEF319';
ctx.lineWidth=5;
ctx.moveTo(0,14);
ctx.lineTo(0,-150);
ctx.stroke();
ctx.closePath();
ctx.restore();//恢复之前保存的状态
//秒针
ctx.save();//保存状态
ctx.beginPath();
ctx.translate(210,210);
ctx.rotate(s*6*Math.PI/180);
ctx.strokeStyle='#FB1F11';
ctx.lineWidth=3;
ctx.moveTo(0,14);
ctx.lineTo(0,-170);
ctx.stroke();
ctx.closePath();
//秒针上的圆
ctx.beginPath();
ctx.fillStyle='#FEF319';
ctx.strokeStyle='#FB1F11';
ctx.lineWidth=3;
ctx.arc(0,-155,5,0,2*Math.PI,true);
ctx.fill();
ctx.stroke();
ctx.closePath();
//中心圆
ctx.beginPath();
ctx.fillStyle='#FEF319';
ctx.strokeStyle='#FB1F11';
ctx.lineWidth=3;
ctx.arc(0,0,8,0,2*Math.PI,true);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();//恢复之前保存的状态
}
</script>
</body>
</html>
