用canvas来实现动态时钟

最新推荐文章于 2024-07-13 09:43:34 发布

不爱当码农的瘦子

最新推荐文章于 2024-07-13 09:43:34 发布

阅读量338

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_43139889/article/details/83342019

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

之前用简单的css与js来实现动态的时钟，发现直接用canvas也可以画时钟，只不过时钟圈和指针应该要放在不同的画布canvas中比较好，因为指针所在的画布是要一直旋转的，详细代码如下（如有问题，望大家指出，一起进步哈！）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>时钟(canvas)</title>
</head>
<body>
	<canvas class="ctx" width="300" height="300" style="border:1px solid red;position: absolute;top: 0;left:0;"></canvas>
	<canvas class="dial" width="300" height="300" style="border:1px solid red;position: absolute;top: 0;left:0;"></canvas>
	

	<script type="text/javascript">
		var canvas=document.querySelector('.ctx');
		var ctx=canvas.getContext('2d');
		ctx.translate(150,150);  //将画布坐标移到中间去
//画圆形
		ctx.beginPath();
		ctx.arc(0,0,100,0,2*Math.PI,true);
		ctx.closePath();
		ctx.strokeStyle='#FF7F24';
		ctx.lineWidth=3;
		ctx.stroke();

//画表盘的12个刻度
		for(var i=0;i<12;i++){
			ctx.save();   //保存当前的绘图状态；
			ctx.rotate(i*Math.PI/6); //一般都是以坐标(0,0)点旋转,因此在此之前要把坐标移到中间去
			ctx.moveTo(0,100);  //移动结束点到表盘6点处
			ctx.lineTo(0,90);  //画长度为10的刻度
			ctx.stroke();
			ctx.restore();  //恢复之前的绘图状态
		};
//画表盘每个刻度上的时刻数字,但是有个小问题，旋转之后数字也会旋转甚至倒立，该怎么处理呢？？？
		var Numbers=[6,7,8,9,10,11,12,1,2,3,4,5];
		for(var i=0;i<Numbers.length;i++){
			ctx.save();
			ctx.rotate(i*Math.PI/6);
			ctx.font='bold 12px 宋体';
			ctx.textBaseline='bottom';
			ctx.fillText(Numbers[i],-3,85);
			ctx.restore();
		}

//画时分秒针,因为时分秒要通过每隔一秒旋转来转动，所以要save保存当前状态，在restore恢复之前状态再去画其他的针
	// //画时针
		// ctx.save()
		// ctx.beginPath();
		// ctx.moveTo(-1,2);
		// ctx.lineTo(40,0);
		// ctx.lineTo(-1,-2);
		// ctx.lineTo(-1,2);
		// ctx.fillstyle='black';
		// ctx.fill();
		// ctx.closePath();	
		// ctx.restore();
	// //画分钟
		// ctx.save()
		// ctx.beginPath();
		// ctx.moveTo(-1,2);
		// ctx.lineTo(55,0);
		// ctx.lineTo(-1,-2);
		// ctx.lineTo(-1,2);
		// ctx.fill();
		// ctx.closePath();
		// ctx.restore();
	// //秒针
		// ctx.save()
		// ctx.beginPath();
		// ctx.moveTo(-2,2);
		// ctx.lineTo(80,0);
		// ctx.lineTo(-2,-2);
		// ctx.lineTo(-2,2);
		// ctx.fill();
		// ctx.closePath();
		// ctx.restore();

		//获得画时分秒的画布,对于指针和圆圈不能使用同一个canvas,使用两个canvas性能也会提高不少
		var dial=document.querySelector('.dial');  
		var dial_ctx=dial.getContext('2d');
		dial_ctx.translate(150,150);  //同样要把坐标移到中间去
		//封装一下
		function Move(context){
			context.clearRect(-150,-150,300,300); //先清除当前的绘图再旋转画针

			var nowTime=new Date();
			var h=nowTime.getHours(),
				m=nowTime.getMinutes(),
				s=nowTime.getSeconds();


			//画时针
			context.save();
			context.beginPath();
			context.rotate((2*Math.PI/12)*h+(2*Math.PI/12)*(m/60)-Math.PI/2);
			context.moveTo(-1,2);
			context.lineTo(35,0);
			context.lineTo(-1,-2);
			context.lineTo(-1,2);
			context.fillstyle='black';
			context.fill();
			context.closePath();	
			context.restore();

			//画分钟
			context.save();
			context.beginPath();
			context.rotate((2*Math.PI/60)*m-Math.PI/2);  //因为坐标系的问题要减去一个Π/2
			context.moveTo(-1,2);
			context.lineTo(55,0);
			context.lineTo(-1,-2);
			context.lineTo(-1,2);
			context.fill();
			context.closePath();
			context.restore();

			//秒针
			context.save()
			context.beginPath();
			context.rotate((2*Math.PI/60)*s-Math.PI/2);
			context.moveTo(-2,2);
			context.lineTo(80,0);
			context.lineTo(-2,-2);
			context.lineTo(-2,2);
			context.fill();
			context.closePath();
			context.restore();
		}

	//通过一个计时器来实现动画
		var timer=setInterval(function(){
			Move(dial_ctx);
			console.log('1')
		},1000)
	</script>
</body>
</html>