Canvas模拟时钟

最新推荐文章于 2022-04-18 15:41:39 发布

 ;

最新推荐文章于 2022-04-18 15:41:39 发布

阅读量230

点赞数 2

分类专栏： HTML5 文章标签： Canvas JavaScript HTML5

本文链接：https://blog.csdn.net/weixin_42210229/article/details/86524324

版权

HTML5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>模拟时钟</title>
<style type="text/css">
	body{
		text-align: center;
	}
	canvas{
		border: 1px solid lightpink;
		box-shadow: 3px 3px 3px 1px pink;
	}
</style>
<script type="text/javascript">
	(function(){
		//canvas元素对象
		var canvas=null;
		//canvas的2d上下文
		var ctx=null;
		//canvas的尺寸
		var cw=0;
		var ch=0;
		/*
		------页面导入时的事件处理------
		*/
		window.addEventListener("load",function(){
			//canvas元素对象
			canvas=document.getElementById("canvas");
			//canvas的上下文
			ctx=canvas.getContext("2d");
			//获取canvas的尺寸
			cw=parseInt(canvas.width);
			ch=parseInt(canvas.height);
			//将坐标平面向右下移动
			ctx.translate(cw/2,ch/2);
			//绘制时钟
			draw_watch();
		},false);
		/*
		------绘制时钟------
		*/
		function draw_watch(){
			//清空Canvas
			ctx.clearRect(-cw/2,-ch/2,cw,ch);
			ctx.fillStyle="lightpink";
			ctx.fillRect(-cw/2,-ch/2,cw,ch);
			//指针圆心
			ctx.beginPath();
			ctx.arc(0,0,6,0,2*Math.PI,true);
			ctx.fillStyle="#010101";
			ctx.fill();
			//计算针的最大长度
			var len=Math.min(cw,ch)/2;
			//绘制刻度盘
			var tlen=len*0.85;
			ctx.font="16px 'Arial";
			ctx.fillStyle="black";
			ctx.textAlign="center";
			ctx.textBaseline="middle";
			for(var i=0;i<12;i++){
				var tagl=Math.PI*2*(3-i)/12;
				var tx=tlen*Math.cos(tagl);
				var ty=-tlen*Math.sin(tagl);
				var number=(i==0)?12:i;
				ctx.fillText(number,tx,ty);	
			}
			//获取当前时刻的时、分、秒
			var d=new Date();
			var h=d.getHours();
			var m=d.getMinutes();
			var s=d.getSeconds();
			if(h>12){h=h-12}
			//绘制时针
			var angle1=Math.PI*2*(3-(h+m/60))/12;
			var length1=len*0.5;
			var width1=5;
			var color1="#000000";
			drawhand(angle1,length1,width1,color1);
			//绘制分针
			var angle2=Math.PI*2*(15-(m+s/60))/60;
			var length2=len*0.7;
			var width2=3;
			var color2="#555555";
			drawhand(angle2,length2,width2,color2);
			//绘制秒针
			var angle3=Math.PI*2*(15-s)/60;
			var length3=len*0.8;
			var width3=1;
			var color3="#aa0000";
			drawhand(angle3,length3,width3,color3);
			//设置timer
			setTimeout(draw_watch,1000);
		}
		/*
		------针绘制函数------
		*/
		function drawhand(angle,len,width,color){
			//计算针端的坐标
			var x=len*Math.cos(angle);
			var y=-len*Math.sin(angle);
			//绘制针
			ctx.strokeStyle=color;
			ctx.lineWidth=width;
			ctx.lineCap="round";//将针尖设置为圆形
			ctx.beginPath();
			ctx.moveTo(0,0);
			ctx.lineTo(x,y);
			ctx.stroke();
		}
	})();
</script>
</head>

<body>
<canvas id="canvas" width="250" height="250"></canvas>
</body>
</html>

首先，使用translate()方法将绘图基点移动到Canvas的中心（向右移动一半宽度距离，向下移动一半高度距离）。这样，后面进行绘图处理时，坐标（0,0）就变成Canvas的中心，将大大简化模拟时钟各部件的坐标计算。

draw_watch()函数，此函数第一行就是清空canvas区域。因为程序中将每隔一秒重现绘制整个模拟时针，以实现动态时针的动画效果。如果不清空canvas的话，上次的秒针将一直保留。

绘制刻度盘代码中，使用Math.PI*2*(3-i)/12的原因，根本原因是时钟的中心坐标已经变成（0,0），因此确定好角度，由半径即可计算出各个时刻的坐标来（注意3点处的角度为0度，所以有（3-i）的算式）。

 ;

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas模拟时钟

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;模拟时钟&lt;/title&gt;&lt;style type="text/css"&gt; body{ text-align: center; } canvas{
复制链接

扫一扫

专栏目录