使用uniapp实现时钟功能

1. 介绍uniapp框架

uniapp是一个基于Vue.js开发跨平台应用的前端框架，可以将同一套代码编译成多个平台的应用程序。其优势在于开发便捷、跨平台性强，适用于开发多种类型的应用程序。

2. 创建时钟组件

在uniapp中创建时钟组件需要使用canvas来绘制时钟的外框和指针。在template中创建包含canvas元素的视图容器，可以为时钟组件指定适当的大小和位置。

html 复制代码

						<canvas canvas-id="clockCanvas"></canvas>

3. 绘制时钟元素

通过获取绘图上下文，可以使用canvas绘制时钟的外框、刻度和数字。根据当前时间来更新时钟的显示，确保时钟能够实时显示当前时间。

javascript 复制代码

const ctx = uni.createCanvasContext('clockCanvas', this);
			
			
				// 绘制时钟外框
				ctx.beginPath();
				ctx.arc(40, 40, 35, 0, 2 * Math.PI);
				// ctx.setStrokeStyle('#590D75'); // 设置时钟外框
				ctx.stroke();
			
				// 绘制时钟刻度
				for (let i = 0; i < 12; i++) {
				  ctx.save();
				  ctx.translate(40, 40);
				  ctx.rotate((i * 30 * Math.PI) / 180);
				  ctx.beginPath();
				  ctx.moveTo(0, -30);
				  ctx.lineTo(0, -33);
				  ctx.stroke();
				  ctx.restore();
				}
				// 绘制时钟刻度带数字
				ctx.setFontSize(10); // 修改字体大小为12
				for (let i = 1; i <= 12; i++) {
					const angle = (i * 30 * Math.PI) / 180;
					const x = 40 + 25 * Math.sin(angle);
					const y = 40 - 25 * Math.cos(angle);
					ctx.fillText(i, x - 4, y + 5);
				}

4. 实现定时器功能

通过实现定时器功能，可以每隔一段时间更新一次时钟的显示，使时钟能够实时展示当前时间。这样可以确保时钟的准确性和实用性。

javascript 复制代码

// 获取当前时间
				const now = new Date();
				const hours = now.getHours();
				const minutes = now.getMinutes();
				const seconds = now.getSeconds();

5. 设置时钟样式

设置时钟的样式包括设置容器的样式以及canvas元素的大小和位置。此外，还可以设置指针的颜色和长度，以及时钟的外观样式，使时钟看起来更加美观和个性化

javascript 复制代码

// 绘制时针
				ctx.save();
				ctx.translate(40, 40);
				ctx.rotate(((hours % 12) * 30 + (minutes / 60) * 30) * (Math.PI / 180));
				ctx.setStrokeStyle('#000000'); // 设置时针颜色为红色
				ctx.beginPath();
				ctx.moveTo(0, 0);
				ctx.lineTo(0, -15);
				ctx.stroke();
				ctx.restore();
			
				// 绘制分针
				ctx.save();
				ctx.translate(40, 40);
				ctx.rotate((minutes * 6 + (seconds / 60) * 6) * (Math.PI / 180));
				ctx.setStrokeStyle('#3f3f3f'); // 设置分针颜色为红色
				ctx.beginPath();
				ctx.moveTo(0, 0);
				ctx.lineTo(0, -20);
				ctx.stroke();
				ctx.restore();
			
				// 绘制秒针
				ctx.save();
				ctx.translate(40, 40);
				ctx.rotate(seconds * 6 * (Math.PI / 180));
				ctx.setStrokeStyle('#b4b4b4'); // 设置秒针颜色为绿色
				ctx.beginPath();
				ctx.moveTo(0, 0);
				ctx.lineTo(0, -25);
				ctx.stroke();
				ctx.restore();
			
				ctx.draw();

6.总结

uniapp实现指针主要是通过canvas画布绘制，通过定时器逐秒改变指针；一下是完整代码

html 复制代码

<template>
	<view class="container">
		<canvas canvas-id="clockCanvas"></canvas>
	</view>
</template>

<script>
	export default {
        data(){
            return{
                time:null
            }
        },
		onReady() {
			this.drawClock();
			this.startClock();
		},
		onUnload() {
			this.stopClock();
		},
		methods: {
			drawClock() {
				const ctx = uni.createCanvasContext('clockCanvas', this);

				// 获取当前时间
				const now = new Date();
				const hours = now.getHours();
				const minutes = now.getMinutes();
				const seconds = now.getSeconds();

				// 绘制时钟外框
				ctx.beginPath();
				ctx.arc(40, 40, 35, 0, 2 * Math.PI);
				ctx.stroke();

				// 绘制时钟刻度
				for (let i = 0; i < 12; i++) {
				  ctx.save();
				  ctx.translate(40, 40);
				  ctx.rotate((i * 30 * Math.PI) / 180);
				  ctx.beginPath();
				  ctx.moveTo(0, -30);
				  ctx.lineTo(0, -33);
				  ctx.stroke();
				  ctx.restore();
				}
				// 绘制时钟刻度带数字
				ctx.setFontSize(12); // 修改字体大小为12
				for (let i = 1; i <= 12; i++) {
					const angle = (i * 30 * Math.PI) / 180;
					const x = 40 + 25* Math.sin(angle);
					const y = 40 - 25* Math.cos(angle);
					ctx.fillText(i, x - 4, y + 5);
				}

				// 绘制时针
				ctx.save();
				ctx.translate(40, 40);
				ctx.rotate(((hours % 12) * 30 + (minutes / 60) * 30) * (Math.PI / 180));
				ctx.beginPath();
				ctx.moveTo(0, 0);
				ctx.lineTo(0, -20);
				ctx.stroke();
				ctx.restore();

				// 绘制分针
				ctx.save();
				ctx.translate(40, 40);
				ctx.rotate((minutes * 6 + (seconds / 60) * 6) * (Math.PI / 180));
				ctx.beginPath();
				ctx.moveTo(0, 0);
				ctx.lineTo(0, -25);
				ctx.stroke();
				ctx.restore();

				// 绘制秒针
				ctx.save();
				ctx.translate(40, 40);
				ctx.rotate(seconds * 6 * (Math.PI / 180));
				ctx.beginPath();
				ctx.moveTo(0, 0);
				ctx.lineTo(0, -28);
				ctx.stroke();
				ctx.restore();

				ctx.draw();
			},
			startClock() {
				this.timer = setInterval(() => {
					this.drawClock();
				}, 1000); // 每秒更新一次钟表
			},
			stopClock() {
				clearInterval(this.timer);
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	canvas{
		width: 80px !important;
		height: 80px !important;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

如果您想改变指针颜色长短等属性可以修改以下属性

javascript 复制代码

ctx.save(): 保存当前绘图上下文的状态。

ctx.translate(40, 40): 将绘图原点移动到(40, 40)的位置，即时钟的中心。

ctx.rotate(((hours % 12) * 30 + (minutes / 60) * 30) * (Math.PI / 180)): 通过旋转画布的方式来绘制时针，根据当前时间计算时针的旋转角度，并将画布旋转到相应的角度。

ctx.setStrokeStyle('#000000'): 设置绘制线条的颜色为黑色。

ctx.beginPath(): 开始一个新的绘制路径。

ctx.moveTo(0, 0): 将画笔移动到指定的坐标(0, 0)。

ctx.lineTo(0, -15): 从当前位置绘制一条直线到指定的坐标(0, -15)，这里设置了时针的长度为15。

ctx.stroke(): 绘制已定义的路径。

ctx.restore(): 恢复之前保存的绘图上下文的状态。

希望以上文章对您有所帮助