微信小程序canvas动态时钟

<view style='width:100%;height:{{canvasheight}}px' catchtap='gocountdown'catchlongtap='touchstart' catchtouchend='touchend'>
  <canvas canvas-id='clock' style='width:100%;height:{{canvasheight}}px'></canvas>
</view>

page({
 data: {
  width: 0,
  height: 0,
  showmask: false
 },
 onload: function (options) {
  var that = this
  //获取系统信息 
  wx.getsysteminfo({
   //获取系统信息成功，将系统窗口的宽高赋给页面的宽高 
   success: function (res) {
    that.width = res.windowwidth
    that.height = res.windowheight
    that.setdata({
     canvaswidth: res.windowwidth * 0.9 * 0.52,
     canvasheight: res.windowwidth * 0.9 * 0.52 * 0.9819,
     rightwidth: res.windowwidth * 0.9 * 0.47
    })
   }
  })
 },
 
 onready: function () {
  this.drawclock();
  // 每40ms执行一次drawclock()，
  this.interval = setinterval(this.drawclock, 40);
 },
 
 
 // 所有的canvas属性以及math.sin,math.cos()等涉及角度的参数都是用弧度表示
 // 时钟
 drawclock: function () {
  let _this = this;
  const ctx = wx.createcanvascontext('clock');
  var height = this.height;
  var width = this.width;
  // 设置文字对应的半径
  var r = this.data.canvaswidth / 5;
  ctx.save();
  // 把原点的位置移动到屏幕中间，及宽的一半，高的一半
  ctx.translate(this.data.canvaswidth / 1.83, this.data.canvasheight / 1.83);
 
  // 画外框
  function drawbackground() {
   ctx.setstrokestyle('#4bb5c3');
   // 设置线条的粗细，单位px
   ctx.setlinewidth(8);
   // 开始路径
   ctx.beginpath();
   // 运动一个圆的路径
   // arc(x,y,半径,起始位置，结束位置，false为顺时针运动)
   ctx.arc(0, 0, r * 1.7, 0, 2 * math.pi, false);
   ctx.closepath();
   // 描出点的路径
   ctx.stroke();
  };
  // 画时钟数
  function drawhoursnum() {
   ctx.setfontsize(20);
   // 圆的起始位置是从3开始的，所以我们从3开始填充数字
   var hours = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
   hours.foreach(function (hour, i) {
    var rad = (2 * math.pi / 12) * i;
    var x = r * math.cos(rad);
    var y = r * math.sin(rad);
    if (hour == 12) {
     ctx.filltext(hour, x - 11, y + 6);
    } else if (hour == 6) {
     ctx.filltext(hour, x - 5, y + 10);
    } else if (hour == 3) {
     ctx.filltext(hour, x, y + 8);
    } else if (hour == 9) {
     ctx.filltext(hour, x - 10, y + 8);
    }
    else {
     //ctx.filltext(hour, x - 6, y + 6);
    }
   })
  };
 
  // 画数字对应的点
  function drawdots() {
   for (let i = 0; i < 60; i++) {
    var rad = 2 * math.pi / 60 * i;
    var x = (r + 15) * math.cos(rad);
    var y = (r + 15) * math.sin(rad);
    ctx.beginpath();
    // 每5个点一个比较大
    if (i % 5 == 0) {
     ctx.arc(x, y, 2, 0, 2 * math.pi, false);
    } else {
     // ctx.arc(x, y, 1, 0, 2 * math.pi, false);
    }
    ctx.setfillstyle('black');
    ctx.fill();
   }
   ctx.closepath();
  }
 
  // 画时针
  function drawhour(hour, minute) {
   ctx.setstrokestyle('#000000');
   // 保存画之前的状态
   ctx.save();
   ctx.beginpath();
   // 根据小时数确定大的偏移
   var rad = 2 * math.pi / 12 * hour;
   // 根据分钟数确定小的偏移
   var mrad = 2 * math.pi / 12 / 60 * minute;
   // 做旋转
   ctx.rotate(rad + mrad);
   ctx.setlinewidth(4);
   // 设置线条结束样式为圆
   ctx.setlinecap('round');
   // 时针向后延伸8个px；
   ctx.moveto(0, 8);
   // 一开始的位置指向12点的方向，长度为r/2
   ctx.lineto(0, -r / 2);
   ctx.stroke();
   ctx.closepath();
   // 返回画之前的状态
   ctx.restore();
  }
 
  // 画分针
  function drawminute(minute, second) {
   ctx.save();
   ctx.beginpath();
   // 根据分钟数确定大的偏移
   var rad = 2 * math.pi / 60 * minute;
   // 根据秒数确定小的偏移
   var mrad = 2 * math.pi / 60 / 60 * second;
   ctx.rotate(rad + mrad);
   // 分针比时针细
   ctx.setlinewidth(3);
   ctx.setlinecap('round');
   ctx.moveto(0, 10);
   // 一开始的位置指向12点的方向，长度为3 * r / 4
   ctx.lineto(0, -3 * r / 4);
   ctx.stroke();
   ctx.closepath();
   ctx.restore();
  }
 
  // 画秒针
  function drawsecond(second, msecond) {
 
   ctx.save();
   ctx.beginpath();
   // 根据秒数确定大的偏移
   var rad = 2 * math.pi / 60 * second;
   // 1000ms=1s所以这里多除个1000
   var mrad = 2 * math.pi / 60 / 1000 * msecond;
   ctx.rotate(rad + mrad);
   ctx.setlinewidth(2);
   ctx.setstrokestyle('#4bb5c3');
   ctx.setlinecap('round');
   ctx.moveto(0, 12);
   ctx.lineto(0, -r);
   ctx.stroke();
   ctx.closepath();
   ctx.restore();
  }
 
  //画出中间那个灰色的圆
  function drawdot() {
   ctx.beginpath();
   ctx.arc(0, 0, 4, 0, 2 * math.pi, false);
   ctx.setfillstyle('#fff9e6');
   ctx.setlinewidth(6);
   ctx.setstrokestyle('#000000');
   ctx.stroke();
   ctx.fill();
   ctx.closepath();
  }
  //画蒙层
  function drawmask() {
   ctx.restore();
   ctx.rect(0, 0, width * 0.5, _this.data.canvasheight);
   ctx.setfillstyle('rgba(0,0,0,.2)')
   ctx.fill()
  }
  function clock() {
   // 实时获取各个参数
   var now = new date();
   var hour = now.gethours();
   var minute = now.getminutes()
   var second = now.getseconds();
   var msecond = now.getmilliseconds();
   if (_this.data.showmask) {
    ctx.scale(0.98,0.98)
   }
   // 依次执行各个方法
   drawbackground();
   drawhoursnum();
   drawdots();
   drawsecond(second, msecond);
   drawhour(hour, minute);
   drawminute(minute, second);
   drawdot();
   if (_this.data.showmask) {
    drawmask();
   }
   ctx.draw();
  }
  clock();
 },
 gocountdown() {
  let _this = this;
  _this.setdata({
   showmask: true
  })
  settimeout(function () {
   _this.setdata({
    showmask: false
   })
   wx.navigateto({
    url: '/pages/countdown/countdown',
   })
  }, 200)
 
 },
 touchstart: function (e) {
  console.log(e)
  this.setdata({
   showmask: true
  })
 },
 touchend: function (e) {
  this.setdata({
   showmask: false
  })
 }
})