微信小程序学习用推荐:canvas画布时钟

微信小程序学习用推荐:canvas画布时钟由小鱼微信小程序精心整理,并分享给大家。喜欢该资源的小伙伴请下载使用,注册、回复、每日签到、点赞送大量积分,满足您免费下载的愿望

说明:

利用canvas实现了模拟时钟功能。

数据接口:

使用本地数据接

目录结构:

  • pages — 存放项目页面渲染相关文件

开发环境:

微信web开发者工具 v0.11.122100

微信小程序学习用推荐:canvas画布时钟

[AppleScript]
// 获取应用实例 Page({         data:{                 width:0,                 height:0         },         //onLoad生命周期函数,监听页面加载         onLoad: function(){                 //将全局变量Index保存在that中,里面函数调用                 var that = this                 //获取系统信息                 wx.getSystemInfo({                         //获取系统信息成功,将系统窗口的宽高赋给页面的宽高                         success: function(res) {                                 that.width = res.windowWidth                                 that.height = res.windowHeight                         }                 })         },         //onReady生命周期函数,监听页面初次渲染完成         onReady: function(){                 //调用canvasApp函数                 this.canvasClock()                 //对canvasAPP函数循环调用                 this.interval = setInterval(this.canvasClock,1000)         },         canvasClock: function(){                 var context = wx.createContext()//创建并返回绘图上下文(获取画笔)                 //设置宽高                 var width = this.width                 var height = this.height                 var R = width/2-55;//设置文字距离时钟中心点距离                 //重置画布函数                 function reSet(){                         context.height = context.height;//每次清除画布,然后变化后的时间补上             context.translate(width/2, height/2);//设置坐标轴原点             context.save();//保存中点坐标1                 }                 //绘制中心圆和外面大圆                 function circle(){                         //外面大圆                         context.setLineWidth(2);             context.beginPath();             context.arc(0, 0, width/2-30, 0, 2 * Math.PI,true);             context.closePath();             context.stroke();             //中心圆             context.beginPath();             context.arc(0, 0, 8, 0, 2 * Math.PI, true);             context.closePath();             context.stroke();                 }                 //绘制字体                 function num(){                         // var R = width/2-60;//设置文字距离时钟中心点距离                         context.setFontSize(20)//设置字体样式             context.textBaseline = "middle";//字体上下居中,绘制时间             for(var i = 1; i < 13; i++) {                 //利用三角函数计算字体坐标表达式                 var x = R * Math.cos(i * Math.PI / 6 - Math.PI / 2);                 var y = R * Math.sin(i * Math.PI / 6 - Math.PI / 2);                 if(i==11||i==12){//调整数字11和12的位置                     context.fillText(i, x-12, y+9);                 }else {                     context.fillText(i, x-6, y+9);                 }             }                 }                 //绘制小格                 function smallGrid(){                                 context.setLineWidth(1);                 context.rotate(-Math.PI/2);//时间从3点开始,倒转90度                 for(var i = 0; i < 60; i++) {                     context.beginPath();                     context.rotate(Math.PI / 30);                     context.moveTo(width/2-30, 0);                     context.lineTo(width/2-40, 0);                     context.stroke();                 }          }          //绘制大格          function bigGrid(){                  context.setLineWidth(5);             for(var i = 0; i < 12; i++) {                 context.beginPath();                 context.rotate(Math.PI / 6);                 context.moveTo(width/2-30, 0);                 context.lineTo(width/2-45, 0);                 context.stroke();             }          }          //指针运动函数         function move(){             var t = new Date();//获取当前时间             var h = t.getHours();//获取小时             h = h>12?(h-12):h;//将24小时制转化为12小时制             var m = t.getMinutes();//获取分针             var s = t.getSeconds();//获取秒针             context.save();//再次保存2             context.setLineWidth(7);             //旋转角度=30度*(h+m/60+s/3600)             //分针旋转角度=6度*(m+s/60)             //秒针旋转角度=6度*s             context.beginPath();             //绘制时针             context.rotate((Math.PI/6)*(h+m/60+s/3600));             context.moveTo(-20,0);             context.lineTo(width/4.5-20,0);             context.stroke();             context.restore();//恢复到2,(最初未旋转状态)避免旋转叠加             context.save();//3             //画分针             context.setLineWidth(5);             context.beginPath();             context.rotate((Math.PI/30)*(m+s/60));             context.moveTo(-20,0);             context.lineTo(width/3.5-20,0);             context.stroke();             context.restore();//恢复到3,(最初未旋转状态)避免旋转叠加             context.save();             //绘制秒针             context.setLineWidth(2);             context.beginPath();             context.rotate((Math.PI/30)*s);             context.moveTo(-20,0);             context.lineTo(width/3-20,0);             context.stroke();         }                 function drawClock(){                         reSet();                         circle();                         num();                         smallGrid();                         bigGrid();                         move();                 }                 drawClock()//调用运动函数                 // 调用 wx.drawCanvas,通过 canvasId 指定在哪张画布上绘制,通过 actions 指定绘制行为                 wx.drawCanvas({                         canvasId:'myCanvas',                         actions: context.getActions()                 })         },         //页面卸载,清除画布绘制计时器         onUnload:function(){                 clearInterval(this.interval)         } }) 

项目地址及下载:

https://github.com/RidingACodeToStray/weCanvasClock
微信小程序学习用推荐:canvas画布时钟 weCanvasClock-master.zip (3.83 KB, 下载次数: 56)

小鱼源码网www.51xyyx.com

轻松一刻:

一对情人za,男总喜欢说:“我要弄死你!”忽忽几日未见,女找到男单位,男问:有事吗?女柔声道:“也没啥事,就是不想活了……”
本文章内容归小鱼源码网所有,未经允许私自转载者必将追究责任
小鱼源码下载网,商业源码,专业客服,质量保证 » 微信小程序学习用推荐:canvas画布时钟

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

精品源码,商业服务,发布得积分,VIP免费下

开通会员 发布资源