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

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

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

正上方，效果如图。

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()；}这最后一步是最难的。难点在于计算时针分针秒针之前的关系。但是，这些都是数学公式。只要计算好角度，剩下的就好办了。

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

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

• 猫头鹰云：香港沙田/cera、洛杉矶、美国/OVH、加拿大/高防高级网络服务器、CN2 GIA 高级网络回报，3.99 美元/月起
• Internetport 瑞典专用服务器：忽略 DMCA/允许视频网站/成人网站，1Gbps 带宽无限流量，49 欧元/月
• 没有微信发现页管理小程序怎么办（没有微信发现页管理小程序怎么办？）
• 微信小程序页面之间传输数据的一些方法（微信小程序页面之间传输数据的一些方法）
• 恢复指定人的微信聊天记录(不用电脑恢复指定人的微信聊天记录)

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