H5学习笔记（四）--canvas钟表实例

最新推荐文章于 2024-01-23 18:54:04 发布

qq_44753552

最新推荐文章于 2024-01-23 18:54:04 发布

阅读量123

点赞数

分类专栏： HTML5 文章标签： canvas

本文链接：https://blog.csdn.net/qq_44753552/article/details/108586591

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何利用HTML5的canvas元素创建一个显示当前时间的动态钟表实例。

摘要由CSDN通过智能技术生成

在画布上制作一个钟表，显示当前时间。
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		html,
		body {
			height: 100%;
			overflow: hidden;
			background: pink;
		}
		#clock {
			background: gray;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate3d(-50%, -50%, 0);
		}
	</style>
</head>
<body>
	<canvas id="clock" width="400" height="400"></canvas>
</body>
<script type="text/javascript">
	window.onload = function () {
		var clock = document.querySelector("#clock");
		if (clock.getContext) {
			var ctx = clock.getContext("2d");
			setInterval(function () {
				ctx.clearRect(0, 0, clock.width, clock.height);
				move();
			}, 1000);

			move();
			function move() {
				ctx.save();
				ctx.lineWidth = 8;
				ctx.strokeStyle = "black";
				ctx.lineCap = "round";
				ctx.translate(200, 200);
				ctx.rotate(-90 * Math.PI / 180);
				ctx.beginPath();

				//外层空心圆盘
				ctx.save();
				ctx.strokeStyle = "#325FA2";
				ctx.lineWidth = 14;
				ctx.beginPath();
				ctx.arc(0, 0, 140, 0, 360 * Math.PI / 180);
				ctx.stroke();
				ctx.restore();


				//时针刻度
				ctx.save();
				for (var i = 0; i < 12; i++) {
					ctx.rotate(30 * Math.PI / 180);
					ctx.beginPath();
					ctx.moveTo(100, 0)
					ctx.lineTo(120, 0);
					ctx.stroke();
				}
				ctx.restore();

				//分针刻度
				ctx.save();
				ctx.lineWidth = 4;
				for (var i = 0; i < 60; i++) {
					ctx.rotate(6 * Math.PI / 180);
					if ((i + 1) % 5 != 0) {
						ctx.beginPath();
						ctx.moveTo(117, 0)
						ctx.lineTo(120, 0);
						ctx.stroke();
					}
				}
				ctx.restore();

				//时针 分针 秒针 表座
				var date = new Date();
				var s = date.getSeconds();
				var m = date.getMinutes() + s / 60;
				var h = date.getHours() + m / 60;
				h = h > 12 ? h - 12 : h;

				//时针
				ctx.save()
				ctx.lineWidth = 14;
				ctx.rotate(h * 30 * Math.PI / 180)
				ctx.beginPath()
				ctx.moveTo(-20, 0);
				ctx.lineTo(80, 0);
				ctx.stroke();
				ctx.restore()

				//分针
				ctx.save()
				ctx.lineWidth = 10;
				ctx.rotate(m * 6 * Math.PI / 180)
				ctx.beginPath()
				ctx.moveTo(-28, 0);
				ctx.lineTo(112, 0);
				ctx.stroke();
				ctx.restore()


				//秒针
				ctx.save()
				ctx.lineWidth = 6;
				ctx.strokeStyle = "#D40000";
				ctx.fillStyle = "#D40000";
				ctx.rotate(s * 6 * Math.PI / 180)
				ctx.beginPath();
				ctx.moveTo(-30, 0);
				ctx.lineTo(83, 0);
				ctx.stroke();
					//表座
					ctx.beginPath();
					ctx.arc(0, 0, 10, 0, 360 * Math.PI / 180);
					ctx.fill();
					//秒头
					ctx.beginPath();
					ctx.arc(96, 0, 10, 0, 360 * Math.PI / 180);
					ctx.stroke();
				ctx.restore()
				
				ctx.restore();
			}
		}
	}
</script>
</html>