<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
  //獲取系統(tǒng)信息 
  wx.getSystemInfo({
   //獲取系統(tǒng)信息成功，將系統(tǒng)窗口的寬高賦給頁(yè)面的寬高 
   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執(zhí)行一次drawClock()，
  this.interval = setInterval(this.drawClock, 40);
 },
 
 
 // 所有的canvas屬性以及Math.sin,Math.cos()等涉及角度的參數(shù)都是用弧度表示
 // 時(shí)鐘
 drawClock: function () {
  let _this = this;
  const ctx = wx.createCanvasContext('clock');
  var height = this.height;
  var width = this.width;
  // 設(shè)置文字對(duì)應(yīng)的半徑
  var R = this.data.canvasWidth / 5;
  ctx.save();
  // 把原點(diǎn)的位置移動(dòng)到屏幕中間，及寬的一半，高的一半
  ctx.translate(this.data.canvasWidth / 1.83, this.data.canvasHeight / 1.83);
 
  // 畫(huà)外框
  function drawBackground() {
   ctx.setStrokeStyle('#4BB5C3');
   // 設(shè)置線(xiàn)條的粗細(xì)，單位px
   ctx.setLineWidth(8);
   // 開(kāi)始路徑
   ctx.beginPath();
   // 運(yùn)動(dòng)一個(gè)圓的路徑
   // arc(x,y,半徑,起始位置，結(jié)束位置，false為順時(shí)針運(yùn)動(dòng))
   ctx.arc(0, 0, R * 1.7, 0, 2 * Math.PI, false);
   ctx.closePath();
   // 描出點(diǎn)的路徑
   ctx.stroke();
  };
  // 畫(huà)時(shí)鐘數(shù)
  function drawHoursNum() {
   ctx.setFontSize(20);
   // 圓的起始位置是從3開(kāi)始的，所以我們從3開(kāi)始填充數(shù)字
   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);
    }
   })
  };
 
  // 畫(huà)數(shù)字對(duì)應(yīng)的點(diǎn)
  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個(gè)點(diǎn)一個(gè)比較大
    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();
  }
 
  // 畫(huà)時(shí)針
  function drawHour(hour, minute) {
   ctx.setStrokeStyle('#000000');
   // 保存畫(huà)之前的狀態(tài)
   ctx.save();
   ctx.beginPath();
   // 根據(jù)小時(shí)數(shù)確定大的偏移
   var rad = 2 * Math.PI / 12 * hour;
   // 根據(jù)分鐘數(shù)確定小的偏移
   var mrad = 2 * Math.PI / 12 / 60 * minute;
   // 做旋轉(zhuǎn)
   ctx.rotate(rad + mrad);
   ctx.setLineWidth(4);
   // 設(shè)置線(xiàn)條結(jié)束樣式為圓
   ctx.setLineCap('round');
   // 時(shí)針向后延伸8個(gè)px；
   ctx.moveTo(0, 8);
   // 一開(kāi)始的位置指向12點(diǎn)的方向，長(zhǎng)度為R/2
   ctx.lineTo(0, -R / 2);
   ctx.stroke();
   ctx.closePath();
   // 返回畫(huà)之前的狀態(tài)
   ctx.restore();
  }
 
  // 畫(huà)分針
  function drawMinute(minute, second) {
   ctx.save();
   ctx.beginPath();
   // 根據(jù)分鐘數(shù)確定大的偏移
   var rad = 2 * Math.PI / 60 * minute;
   // 根據(jù)秒數(shù)確定小的偏移
   var mrad = 2 * Math.PI / 60 / 60 * second;
   ctx.rotate(rad + mrad);
   // 分針比時(shí)針細(xì)
   ctx.setLineWidth(3);
   ctx.setLineCap('round');
   ctx.moveTo(0, 10);
   // 一開(kāi)始的位置指向12點(diǎn)的方向，長(zhǎng)度為3 * R / 4
   ctx.lineTo(0, -3 * R / 4);
   ctx.stroke();
   ctx.closePath();
   ctx.restore();
  }
 
  // 畫(huà)秒針
  function drawSecond(second, msecond) {
 
   ctx.save();
   ctx.beginPath();
   // 根據(jù)秒數(shù)確定大的偏移
   var rad = 2 * Math.PI / 60 * second;
   // 1000ms=1s所以這里多除個(gè)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();
  }
 
  //畫(huà)出中間那個(gè)灰色的圓
  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();
  }
  //畫(huà)蒙層
  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() {
   // 實(shí)時(shí)獲取各個(gè)參數(shù)
   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)
   }
   // 依次執(zhí)行各個(gè)方法
   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
  })
 }
})