教你如何用一个小程序创建一个画布时钟(例子)。

本文带你携手用微信小程序打造画布时钟，希望对你有所帮助！

今天做了一个微信小程序画布钟，就是传统的数字钟。【相关学习推荐:小程序开发教程】

正上方，效果如图。

OnLoad: function(){//将全局变量Index保存在那，其中函数调用var that = this//获取系统信息wx.getSystemInfo({//获取系统信息成功，将系统窗口的宽度和高度赋给页面的宽度和高度成功:function (res) {that。width = RES . window width that . height = RES . window height } } } }，首先读取屏幕的宽度和高度。这是为了以后计算钟的位置，以便放在中央。

on:function(){//调用canvasApp函数this.canvasClock()//调用this。Interval = setInterval (this。CanvasClock，1000)}到canvasAPP函数，并开启就绪生命周期函数来监控页面第一次渲染的完成情况。然后添加定时器，每秒执行一次this.canvasClock函数。

//重置画布函数function Reset(){ context . height = context . height；//每次清空画布，然后将context.translate (width/2，height/2)添加到改变的时间；//设置坐标轴原点context . save()；//保存中点坐标1}//画出圆心和外大圆函数circle(){//外大圆context . set line width(2)；context . begin path()；context.arc(0，0，width/2-30，0，2 *数学。PI，真)；context . close path()；context . stroke()；//中心圆context . begin path()；context.arc(0，0，8，0，2 *数学。PI，真)；context . close path()；context . stroke()；}//绘制字体function num(){//var r = width/2-60；//设置文本与时钟中心点的距离context.setFontSize(20)//设置字体样式context . text baseline = " middle ；；//字体上下居中，绘制时间为for(var I = 1；我 lt13;++){//用三角函数计算字体坐标表达式var x = r * math . cos(I * math . pi/6-math . pi/2)；var y = R * Math.sin(i * Math。圆周率/6 ^ -数学。π/2)；If(i==11||i==12){//调整数字11和12的位置context.fillText(i，x-12，y+9)；}else { context.fillText(i，x-6，y+9)；} } } }//绘制小网格函数small grid(){ context . set line width(1)；context . rotate(-数学。π/2)；//时间从3点开始，反转90度for(var I = 0；我 lt60;i++){ context . begin path()；context.rotate(数学。PI/30)；context.moveTo(width/2-30，0)；context.lineTo(width/2-40，0)；context . stroke()；} }//绘制大格子函数big grid(){ context . set line width(5)；for(var I = 0；我 lt12;i++){ context . begin path()；context.rotate(数学。PI/6)；context.moveTo(width/2-30，0)；context.lineTo(width/2-45，0)；context . stroke()；}}上面的部分比较固定，就是圆、刻度、数字等。那不会动的。但是因为每画一次画布都需要清理一次，所以这部分也需要回收。

函数move(){ var t = new Date()；//获取当前时间var h = t . Get hours()；//获取小时h = h >；12?(H-12):h；//将24小时制转换为12小时制var m = t . get minutes()；//获取分针var s = t . Get seconds()；//获取二手context . save()；//再次保存2 context . set line width(7)；//旋转角度=30度*(h+m/6主机参考s/3600) //分针旋转角度=6度*(m+s/60) //秒针旋转角度=6度* s context . begin path()；//画时针context . rotate((math . pi/6)*(h+m/6主机参考s/3600))；context.moveTo(-20，0)；context.lineTo(width/4.5-20，0)；context . stroke()；context . restore()；//恢复到2，(原来不旋转的状态)避免旋转叠加的context . save()；//3 //绘制分针context . set line width(5)；context . begin path()；context.rotate((数学。PI/30)*(m+s/60))；context.moveTo(-20，0)；context.lineTo(width/3.5-20，0)；context . stroke()；context . restore()；//恢复到3，(原来不旋转的状态)避免旋转叠加的context . save()；//画秒针context . set line width(2)；context . begin path()；context.rotate((数学。π/30)* s)；context.moveTo(-20，0)；context.lineTo(width/3-20，0)；context . stroke()；}这最后一步是最难的。难点在于计算时针分针秒针之前的关系。但是，这些都是数学公式。只要计算好角度，剩下的就好办了。

有关编程的更多信息，请访问:编程视频！！以上就是教你如何用小程序创建画布时钟(实例)的细节。更多请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 下面来说说小程序中页面传递参数的几种方式（微信小程序页面传递值）。
• 如何在小程序中实现下拉刷新和上拉加载功能？（附代码）（小程序的上拉加载触发器）
• 如何在小程序中创建页面二维码
• 如何通过applet vant组件将默认样式单元px转换为rpx（Vantui applet）
• 再来说说微信小程序中的生命周期（功能）（请谈谈小程序的生命周期功能？)

本文由主机参考刊发，转载请注明：教你如何用一个小程序创建一个画布时钟(例子)。 https://zhujicankao.com/77113.html