canvas时钟

最新推荐文章于 2025-05-26 17:52:29 发布

原创最新推荐文章于 2025-05-26 17:52:29 发布 · 457 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#canvas 钟表 HTML5

HTML5 专栏收录该内容

3 篇文章

订阅专栏

https://img-blog.youkuaiyun.com/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>