html5 canvas实现圆形时钟实例代码

发布时间：2023-05-15 02:17:22

我们可以使用HTML5 Canvas和JavaScript来实现一个圆形时钟的效果。在绘制时钟时，我们需要画一个圆来代表时钟的外观，然后在圆心处绘制三个指针来表示时、分、秒。我们可以使用Canvas API中的arc()和lineTo()函数来画圆和指针。通过使用定时器，我们可以每秒钟更新指针的位置并重绘时钟。

下面是实现圆形时钟的HTML5 Canvas的基本实例代码。

<!DOCTYPE html>
<html>
<head>
	<title>Circle Clock</title>
	<style>
		canvas{
			display: block;
			margin: 0 auto;
			background: #000;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="300" height="300"></canvas>
	<script>
		// 获取canvas元素
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');

		// 获取canvas的中心点
		var centerX = canvas.width / 2;
		var centerY = canvas.height / 2;

		// 时钟的半径，减去10像素的间距，防止指针超出边界
		var radius = 140;

		// 绘制时钟外观
		function drawClock() {
			// 绘制一个黑色圆
			ctx.beginPath();
			ctx.arc(centerX, centerY, radius, 0, 2*Math.PI);
			ctx.fillStyle = '#000';
			ctx.fill();
			ctx.closePath();

			// 绘制12个小时刻度
			for (var i = 1; i <= 12; i++) {
				var angle = i * Math.PI / 6;
				ctx.beginPath();
				ctx.arc(centerX + radius * Math.sin(angle), centerY - radius * Math.cos(angle), 4, 0, 2*Math.PI);
				ctx.fillStyle = '#fff';
				ctx.fill();
				ctx.closePath();
			}
		}

		// 绘制指针
		function drawPointer(position, length, width, color) {
			ctx.beginPath();
			ctx.strokeStyle = color;
			ctx.lineWidth = width;
			ctx.lineCap = 'round';
			ctx.moveTo(centerX, centerY);
			ctx.lineTo(centerX + length * Math.sin(position), centerY - length * Math.cos(position));
			ctx.stroke();
			ctx.closePath();
		}

		// 更新时钟
		function updateClock() {
			// 获取当前时间
			var date = new Date();
			var hours = date.getHours() % 12; // 将小时数转换为12小时制
			var minutes = date.getMinutes();
			var seconds = date.getSeconds();

			// 绘制指针
			drawPointer((hours - 3) * Math.PI / 6 + (minutes * Math.PI / 360) + (seconds * Math.PI / 21600), 60, 5, '#fff'); // 时针
			drawPointer((minutes - 15) * Math.PI / 30 + (seconds * Math.PI / 1800), 90, 3, '#fff'); // 分针
			drawPointer((seconds - 15) * Math.PI / 30, 120, 2, '#ff0000'); // 秒针

			// 绘制时钟外观
			drawClock();
		}

		// 使用定时器更新时钟
		setInterval(updateClock, 1000);
	</script>
</body>
</html>

在实例代码中，我们通过使用Canvas API来绘制时钟的外观和指针。由于每个指针的长度和宽度都不同，因此我们为画指针编写了单独的函数drawPointer(). 该函数需要四个参数：指针的位置，指针的长度，指针的宽度和指针的颜色。

updateClock()函数将获取当前的时、分、秒，并根据角度计算每个指针的位置。在该函数中，我们还调用了drawClock()函数，以便在更新指针之前重绘整个时钟。最后，我们使用setInterval()方法每秒钟更新时钟。