VPS参考测评推荐
专注分享VPS主机优惠信息
hostkvm优惠促销活动
zji优惠促销活动
衡天云优惠活动
亚马逊云aws.amazon.com最新优惠活动

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

locvps
主机参考:VPS参考测评推荐,专注分享VPS主机优惠信息!若您是商家也可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
部分文章发布时间较久远,可能存在未知因素,购买时建议在本站搜索商家名称,可查看相关文章充分了解商家!若非中文页面可使用谷歌浏览器同步翻译!PayPal代付/收录合作

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

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

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

1.png

正上方,效果如图。

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

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

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

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

【腾讯云】爆款2核2G云服务器首年40元,企业首购最高获赠300元京东卡
打赏
转载请注明原文链接:主机参考 » 教你如何用一个小程序创建一个画布时钟(例子)。
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!