canvas绘制当前时间时钟

最新推荐文章于 2022-11-14 08:33:35 发布

sdh888hf

最新推荐文章于 2022-11-14 08:33:35 发布

阅读量309

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： html5

本文链接：https://blog.youkuaiyun.com/sdh888hf/article/details/84412907

JS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用 HTML5 Canvas 和 JavaScript 实现的动态显示当前时间的时钟。该时钟能够实时更新秒针、分针和时针的位置，并在画布上绘制出完整的时钟样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
	<head>
		<title>html5 clock</title>
	</head>
	<body>
		<canvas id="clock" width=200 height=200 style="position:absolute;left:200;top:100"></canvas>

		<script>
			var clockCanvas = document.getElementById("clock");
			var c = clockCanvas.getContext("2d");

			function clock(){
				var date = new Date();
				var d = date.getSeconds();
				var m = date.getMinutes();
				var h = date.getHours();

				c.beginPath();
				c.arc(100,100,99,0,2*Math.PI);
				c.moveTo(192,100);
				c.arc(100,100,92,0,2*Math.PI);
				c.textAlign = 'center';
				c.fillText("O",100,100);
				c.font = 'bold 16px Arial';
				c.fillText("12",100,25);
				c.fillText("6",100,185);
				c.fillText("9",25,105);
				c.fillText("3",175,105);
				c.translate(100,100);
				for(var i = 1;i<=12;i++){
					if((i-1)%3!=0){
						c.moveTo(0,-93);
						c.lineTo(0,-75);
					}
					c.rotate(Math.PI/6);
				}
				c.closePath();
				c.stroke();

				c.beginPath();
				c.lineWidth = 5;

				c.rotate(Math.PI/6/300*(m*60+d));
				c.moveTo(0,0);
				c.lineTo(0,-70);
				c.rotate(-Math.PI/6/300*(m*60+d));

				c.rotate(Math.PI/6/3600*(h*3600+m*60+d));
				c.moveTo(0,0);
				c.lineTo(0,-50);
				c.rotate(-Math.PI/6/3600*(h*3600+m*60+d));

				c.closePath();
				c.stroke();

				c.beginPath();

				c.rotate(Math.PI/6/5*d);
				c.lineWidth = 2;
				c.moveTo(0,0);
				c.lineTo(0,-60);
				c.rotate(-Math.PI/6/5*d);

				c.moveTo(0,0);
				c.arc(0,0,8,0,Math.PI*2);

				c.closePath();
				c.fill();
				c.stroke();

			}
			clock();

			setInterval(function(){
				clockCanvas.width = 0;
				clockCanvas.width = 200;
				clockCanvas.height = 0;
				clockCanvas.height = 200;
				clock();
			},1000);

		</script>

	</body>

</html>