canvas绘制当前时间时钟

最新推荐文章于 2024-04-26 09:00:31 发布

sdh888hf

最新推荐文章于 2024-04-26 09:00:31 发布

阅读量215

点赞数

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

本文链接：https://blog.csdn.net/sdh888hf/article/details/84412907

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<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>

sdh888hf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制当前时间时钟

[code="html"] html5 clock var clockCanvas = document.getElementById("clock"); var c = clockCanvas.getContext("2d"); function clock(){ var date = new Date(...
复制链接

扫一扫