手把手教你使用小程序创建画布时钟实例

 4380

本篇文章手把手带大家使用微信小程序创建一个画布时钟,希望对大家有所帮助!


手把手教你使用小程序创建画布时钟实例


今天做的是一个微信小程序画布时钟,也就是传统的数字时钟。


手把手教你使用小程序创建画布时钟实例

直接上图,效果如图。

  1. onLoad: function(){
  2.     //将全局变量Index保存在that中,里面函数调用
  3.     var that = this
  4.     //获取系统信息
  5.     wx.getSystemInfo({
  6.         //获取系统信息成功,将系统窗口的宽高赋给页面的宽高
  7.         success: function(res) {
  8.             that.width = res.windowWidth
  9.             that.height = res.windowHeight
  10.         }
  11.     })
  12. },

首先是要读取屏幕的宽高,这是为了以后计算出时钟的位置,让它能够摆在中心位置。

  1. onReady: function(){
  2.     //调用canvasApp函数
  3.     this.canvasClock()
  4.     //对canvasAPP函数循环调用
  5.     this.interval = setInterval(this.canvasClock,1000)
  6. },

onReady生命周期函数,监听页面初次渲染完成。然后再加上定时器,没一秒执行一次this.canvasClock函数。

  1. //重置画布函数
  2. function reSet(){
  3.     context.height = context.height;//每次清除画布,然后变化后的时间补上
  4.     context.translate(width/2, height/2);//设置坐标轴原点
  5.     context.save();//保存中点坐标1
  6. }
  7. //绘制中心圆和外面大圆
  8. function circle(){
  9.     //外面大圆
  10.     context.setLineWidth(2);
  11.     context.beginPath();
  12.     context.arc(0, 0, width/2-30, 0, 2 * Math.PI,true);
  13.     context.closePath();
  14.     context.stroke();
  15.     //中心圆
  16.     context.beginPath();
  17.     context.arc(0, 0, 8, 0, 2 * Math.PI, true);
  18.     context.closePath();
  19.     context.stroke();
  20. }
  21. //绘制字体
  22. function num(){
  23.     // var R = width/2-60;//设置文字距离时钟中心点距离
  24.     context.setFontSize(20)//设置字体样式
  25.     context.textBaseline = "middle";//字体上下居中,绘制时间
  26.     for(var i = 1; i < 13; i++) {
  27.         //利用三角函数计算字体坐标表达式
  28.         var x = R * Math.cos(* Math.PI / 6 - Math.PI / 2);
  29.         var y = R * Math.sin(* Math.PI / 6 - Math.PI / 2);
  30.         if(i==11||i==12){//调整数字11和12的位置
  31.             context.fillText(i, x-12, y+9);
  32.         }else {
  33.             context.fillText(i, x-6, y+9);
  34.         }
  35.     }
  36. }
  37. //绘制小格
  38. function smallGrid(){
  39.         context.setLineWidth(1);
  40.         context.rotate(-Math.PI/2);//时间从3点开始,倒转90度
  41.         for(var i = 0; i < 60; i++) {
  42.             context.beginPath();
  43.             context.rotate(Math.PI / 30);
  44.             context.moveTo(width/2-30, 0);
  45.             context.lineTo(width/2-40, 0);
  46.             context.stroke();
  47.         }
  48.  }
  49.  //绘制大格
  50.  function bigGrid(){
  51.     context.setLineWidth(5);
  52.     for(var i = 0; i < 12; i++) {
  53.         context.beginPath();
  54.         context.rotate(Math.PI / 6);
  55.         context.moveTo(width/2-30, 0);
  56.         context.lineTo(width/2-45, 0);
  57.         context.stroke();
  58.     }
  59. }

上面这部分相对来说是固定的,也就是不会动的圆,刻度,数字等。不过因为每次画都需要清除一次画布,所以这一部分也需要再循环里面。

  1. function move(){
  2.     var t = new Date();//获取当前时间
  3.     var h = t.getHours();//获取小时
  4.     h = h>12?(h-12):h;//将24小时制转化为12小时制
  5.     var m = t.getMinutes();//获取分针
  6.     var s = t.getSeconds();//获取秒针
  7.     context.save();//再次保存2
  8.     context.setLineWidth(7);
  9.     //旋转角度=30度*(h+m/60+s/3600)
  10.     //分针旋转角度=6度*(m+s/60)
  11.     //秒针旋转角度=6度*s
  12.     context.beginPath();
  13.     //绘制时针
  14.     context.rotate((Math.PI/6)*(h+m/60+s/3600));
  15.     context.moveTo(-20,0);
  16.     context.lineTo(width/4.5-20,0);
  17.     context.stroke();
  18.     context.restore();//恢复到2,(最初未旋转状态)避免旋转叠加
  19.     context.save();//3
  20.     //画分针
  21.     context.setLineWidth(5);
  22.     context.beginPath();
  23.     context.rotate((Math.PI/30)*(m+s/60));
  24.     context.moveTo(-20,0);
  25.     context.lineTo(width/3.5-20,0);
  26.     context.stroke();
  27.     context.restore();//恢复到3,(最初未旋转状态)避免旋转叠加
  28.     context.save();
  29.     //绘制秒针
  30.     context.setLineWidth(2);
  31.     context.beginPath();
  32.     context.rotate((Math.PI/30)*s);
  33.     context.moveTo(-20,0);
  34.     context.lineTo(width/3-20,0);
  35.     context.stroke();
  36. }

最后这一步是最难的,难点在于计算时针,分针,秒针之前的关系。不过这些都是数学公式,只要把角度都计算好了,剩下的东西就好办了。

原文地址:https://juejin.cn/post/7008355969600061447

作者:诗一样的代码


本文网址:https://www.zztuku.com/detail-9368.html
站长图库 - 手把手教你使用小程序创建画布时钟实例
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐