https://img-blog.csdn.net/20170111125030603?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2V4eV9zcXVpcnJlbA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>仿石英钟</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#cont{
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
body{
background-color: rgb(41,63,104);
}
</style>
</head>
<body>
<canvas id="cont" width="410" height="410"></canvas>
</body>
<script type="text/javascript">
var cont = document.getElementById('cont');
var contText = cont.getContext('2d');
var deg = Math.PI/180;
//载入背景图
var imge = new Image();
imge.src = 'img/1.jpg';
//围绕定点运动的物体的坐标
function position(x,y,r,angle){
var smallX = x + r*Math.cos(angle);
var smallY = y + r*Math.sin(angle);
return [smallX, smallY];
}
//画钟表外轮廓
function wrap(){
contText.beginPath();
contText.shadowColor = 'rgb(7,255,255)';
contText.shadowBlur = 25;
contText.arc(205,205,200,0,2*Math.PI);
contText.strokeStyle = 'rgb(0,196,242)';
contText.lineWidth = '9';
contText.stroke();
contText.closePath();
//中间圆点
contText.beginPath();
contText.shadowBlur = 6;
contText.arc(205,205,6,0,2*Math.PI);
contText.fillStyle = 'rgb(222,81,43)';
contText.fill();
contText.closePath();
//更小的圆点
contText.beginPath();
contText.arc(205,205,3,0,2*Math.PI);
contText.fillStyle = 'rgb(74,177,75)';
contText.fill();
contText.closePath();
//刻度
for(var i=0; i< 60; i++){
var angle = i*6*deg;
var p = position(205,205,192,angle);
contText.beginPath();
contText.shadowBlur = 0;
if (i%5 == 0) {
contText.arc(p[0],p[1],4,0,2*Math.PI);
contText.fillStyle = 'rgb(253,148,65)';
}
else{
contText.arc(p[0],p[1],2,0,2*Math.PI);
contText.fillStyle = 'rgb(250,61,91)';
}
contText.fill();
contText.closePath();
}
}
//数字
function num() {
for(var i = 0; i < 12; i++) {
var angle = i * 30 * deg - 60 * deg;
var p = position(205, 215, 162, angle);
contText.beginPath();
contText.shadowColor = 'rgb(7,255,255)';
contText.shadowBlur = 20;
contText.font = '30px serif';
contText.lineWidth = '1';
contText.textAlign = 'center';
contText.strokeStyle = 'rgb(185,230,254)';
contText.strokeText(i + 1, p[0], p[1]);
contText.closePath();
}
}
//时分秒针,构造函数
function Needle(p1,p2,ph,width,color){
this.startX = p1[0];
this.startY = p1[1];
this.endX = p2[0];
this.endY = p2[1];
this.headX = ph[0];
this.headY = ph[1];
this.color = color;
this.width = width;
}
//添加方法
Needle.prototype.draw = function(){
contText.shadowColor = 'rgb(7,255,255)';
contText.shadowBlur = 15;
contText.beginPath();
contText.moveTo(this.startX,this.startY);
contText.lineTo(this.endX,this.endY);
contText.lineWidth = this.width;
contText.strokeStyle = this.color;
contText.stroke();
contText.closePath();
//指针头部
contText.beginPath();
contText.arc(this.headX,this.headY,5,0,2*Math.PI);
contText.fillStyle = this.color;
contText.fill();
contText.closePath();
}
//获取时间,并转化为角度
function time(){
var fullTime = [];
var nowTime = new Date();
var nowHour = nowTime.getHours();
var nowMin = nowTime.getMinutes();
var nowSec = nowTime.getSeconds();
return fullTime = [nowHour,nowMin,nowSec];
}
//钟表运动函数
function go(){
//清除画布
cont.width = cont.width;
contText.drawImage(imge,140,290,550,700,0,0,410,410);
var t = time();//获取当前时间
angleS = t[2]*6*deg-90*deg;//秒针转动的角度
//分针转动的角度
angleM = t[1]*6*deg-90*deg + t[2]*6*deg/60;
//时针转动的角度
angleH = t[0]*30*deg-90*deg + (t[1]*6*deg+t[2]*6*deg/60)/12;
//秒针位置
var pS1 = position(205,205,180,angleS);
var pS2 = position(205,205,20,angleS+Math.PI);
var pHead1 = position(205,205,160,angleS);
//分针位置
var pM1 = position(205,205,130,angleM);
var pM2 = position(205,205,15,angleM+Math.PI);
var pHead2 = position(205,205,110,angleM);
//时针位置
var pH1 = position(205,205,100,angleH);
var pH2 = position(205,205,10,angleH+Math.PI);
var pHead3 = position(205,205,80,angleH);
//创建新指针
var sec = new Needle(pS2,pS1,pHead1,2,'rgb(60,50,50)');
var min = new Needle(pM2,pM1,pHead2,4,'rgb(6,55,82)');
var hou = new Needle(pH2,pH1,pHead3,6,'rgb(2,80,83)');
num();//绘制数字
hou.draw();//绘制时针
min.draw();//绘制分针
sec.draw();//绘制秒针
wrap();//绘制表盘、刻度
}
window.onload = function(){
go();//先加载一次
}
setInterval(go,1000);//执行动画
</script>
</html>