教你如何用小程序创建画布时钟(示例)(微信小程序画布)

本文带你用微信小程序创建一个画布时钟，希望对你有帮助！

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

直接上图，效果如图。

OnLoad: function(){//将全局变量Index保存在那，里面的函数调用var that = this//获取系统信息wx.getSystemInfo({//获取系统信息成功，将系统窗口的宽度和高度赋给页面的宽度和高度成功:function (res) {that。宽度=分辨率窗口宽度。height = res. windowheight}}}，第一件事就是读取屏幕的宽度和高度，这是为了计算未来时钟的位置，使其可以放在中央。

OnReady: function(){//调用canvasApp函数this.canvasClock()//调用this。interval = setinterval (this。canvasclock，1000)}循环传递给canvasAPP函数，onready生命周期函数会监控页面初始渲染的完成情况。然后添加一个定时器，每秒执行一次this.canvasClock函数。

//重置画布函数function Reset(){ context . height = context . height；//每次都清空画布，然后添加上下文。在更改的时间平移(宽度/2，高度/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 & quot；；//字体上下居中，绘制时间为for(var I = 1；我& lt13;I++) {//计算字体坐标表达式VAR X = R * Math。因为(我*数学。圆周率/6-数学。π/2)用三角函数；var y = R * Math.sin(i * Math。圆周率/6 ^ -数学。π/2)；If(i==11||i==12){//调整数字11和12的位置。Filltext (I，x-12，y+9)；}else { context.fillText(i，x-6，y+9)；} } }//画一个小函数小网格(){context。setline 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()；} }//绘制大网格函数(){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 & gt12?(H-12):h；//将24小时制转换为12小时制。var m = t . get minutes()；//Get分针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()；最后一步是最难的，难点在于计算时针、分针、秒针的关系。但这些都是数学公式。只要计算好角度，剩下的就好办了。

更多编程相关知识，请访问:编程视频！！

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

• 小程序开发的具体流程是什么（小程序开发入门教程）
• 小程序调用百度云接口实现人脸识别（人脸识别小程序百度云下载）
• 微信小程序开发需要掌握哪些技术（微信小程序开发需要哪些技能）？
• 如何将外部css引入小程序(如何将外部js引入微信小程序)
• 小程序开发的难点是什么（开发小程序难吗）

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