JS实现时钟操作

最新推荐文章于 2023-01-18 01:07:27 发布

KillerCodes

最新推荐文章于 2023-01-18 01:07:27 发布

阅读量237

点赞数

分类专栏： javascipt

本文链接：https://blog.csdn.net/aaassslll147/article/details/105011564

版权

javascipt 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>时钟制作</title>
		<style type="text/css">
			canvas{
				border: solid 1px red;
			}
		</style>
	</head>
	<body>
		<canvas id="can" width="800" height="600"></canvas>
	</body>
	<script type="text/javascript">
		var can=document.getElementById("can");
		var ctx=can.getContext("2d");
		
		function clock(){
			var date=new Date();
			var h=date.getHours()%12;
			var m=date.getMinutes();
			var s=date.getSeconds();
			var ms=date.getMilliseconds();
			h=h+m/60;
			m=m+s/60;
			s=s+ms/1000;
			ctx.clearRect(0,0,800,600);//在给定区域内清空像素
			ctx.save();//保存当前图像状态的一份拷贝
			ctx.translate(250,250);//重新映射画布上的（0，0）位置
			
			ctx.beginPath();
			ctx.lineWidth=20;
			ctx.strokeStyle="black";
			
			ctx.arc(0,0,220,0,2*Math.PI);//圆半径为220
			ctx.closePath();
			ctx.stroke();//绘制
			
			//绘制小时刻度
			ctx.save();
			for(var i=0;i<12;i++)
			{
				ctx.lineWidth=6;
				ctx.rotate(2*Math.PI/12);//旋转画布中的元素
				ctx.moveTo(0,-190);//开始一条路径
				ctx.lineTo(0,-170);//添加一个新点
				ctx.stroke();
			}
			ctx.restore();//从栈中弹出的图形状态并恢复对象的属性、剪切路径和变换矩阵的值
			//绘制分钟刻度
			ctx.save();
			for(var i=0;i<60;i++)
			{
				ctx.lineWidth=2;
				ctx.rotate(2*Math.PI/60);//旋转画布中的元素
				ctx.moveTo(0,-190);//开始一条路径
				ctx.lineTo(0,-180);//添加一个新点
				ctx.stroke();
			}
			ctx.restore();
			//绘制数字
			ctx.save();
			for(var i=1;i<=12;i++)
			{
				ctx.beginPath();
				ctx.lineWidth=8;
				ctx.strokeStyle="black";
				ctx.font="30px 宋体";
				ctx.textAlign="center";
				ctx.textBaseline="middle";
				//ctx.rotate(2*Math.PI/12);//旋转画布中的元素
				var rad=2*Math.PI/12*i;
				var x=Math.sin(rad)*150;
				var y=Math.cos(rad)*150;
				ctx.fillText(i,x,-y);
				ctx.closePath();
				ctx.stroke();
			}
			ctx.restore();
			//绘制时针
			ctx.save();
			ctx.beginPath();
			ctx.lineWidth=8;
			ctx.strokeStyle="black";
			ctx.rotate(h*2*Math.PI/12);
			ctx.moveTo(0,20);
			ctx.lineTo(0,-120);
			ctx.closePath();
			ctx.stroke();
			ctx.restore();
			//绘制分针
			ctx.save();
			ctx.beginPath();
			ctx.lineWidth=6;
			ctx.strokeStyle="gray";
			ctx.rotate(m*2*Math.PI/60);
			ctx.moveTo(0,30);
			ctx.lineTo(0,-130);
			ctx.closePath();
			ctx.stroke();
			ctx.restore();
			//绘制秒针
			ctx.save();
			ctx.beginPath();
			ctx.lineWidth=4;
			ctx.strokeStyle="indianred";
			ctx.rotate(s*2*Math.PI/60);
			ctx.moveTo(0,50);
			ctx.lineTo(0,-150);
			ctx.closePath();
			ctx.stroke();
			ctx.restore();
			//绘制小圆圈
			ctx.beginPath();
			ctx.lineWidth=4;
			ctx.arc(0,0,4,0,2*Math.PI);
			ctx.closePath();
			ctx.strokeStyle="#FF0000";
			ctx.stroke();
			ctx.restore();
			
			
			
		}
		
		setInterval(clock,10);
	</script>
</html>

实现结果如下：