<canvas canvas-id="myCanvas" class="mycanvas"></canvas>

/**index.wxss**/
.mycanvas {
  width: 100%;
  height: 100%;
  position: fixed;
}

Page({
  width: 0,  //窗口寬度
  height: 0,  //窗口高度
  onLoad: function () {
    // 獲取系統(tǒng)信息
    wx.getSystemInfo({
      // 獲取系統(tǒng)信息成功，保存獲取到的系統(tǒng)窗口的寬高
      success: res => {
        // console.log(res)
        this.width = res.windowWidth
        this.height = res.windowHeight
        }
      })
    },
  timer: null,  //定時(shí)器
  onReady: function(){
    //創(chuàng)建ctx實(shí)例
     var ctx = wx.createCanvasContext('myCanvas')
    //將角度轉(zhuǎn)換為弧度，方便在后面使用
     //計(jì)算公式：弧度 = 角度*Math.PI / 180
    const D6 = 6 * Math.PI / 180
     const D30 = 30 * Math.PI / 180
     const D90 = 90 * Math.PI / 180
     // 獲取寬和高值
     var width = this.width, height = this.height
     // 計(jì)算表盤半徑，留出 30px 外邊距
    var radius = width / 2 -30
     // 每秒繪制一次
     draw()
     this.timer = setInterval(draw, 1000)
     // 繪制函數(shù)
     function draw(){
       // 設(shè)置坐標(biāo)軸原點(diǎn)為窗口的中心點(diǎn)
       ctx.translate(width / 2, height / 2)
       // 繪制表盤
       drawClock(ctx,radius)
       // 繪制指針
       drawHand(ctx, radius)
       //執(zhí)行繪制
       ctx.draw()
   }
  
    // 繪制表盤部分
    function drawClock(ctx, radius){
      // 繪制大圓
      // 大圓的半徑 radius 線條粗細(xì)為2px
      ctx.setLineWidth(2)  //設(shè)置線條粗細(xì)
      ctx.beginPath()  //開(kāi)始一個(gè)新路徑
      ctx.arc(0, 0, radius, 0, 2 * Math.PI, true)
      ctx.stroke()   //畫線
      // 繪制同心圓
      // 中心圓的半徑為8px 線條粗細(xì)為1px
      ctx.setLineWidth(1)  //設(shè)置線條粗細(xì)
      ctx.beginPath()  //開(kāi)始一個(gè)新路徑
      ctx.arc(0, 0, 8, 0, 2 * Math.PI, true)
      ctx.stroke()   //畫線
      // 繪制大刻度盤 線條粗細(xì)為5px
      ctx.setLineWidth(5)
      for (var i = 0; i < 12; ++i){
        // 以原點(diǎn)為中心順時(shí)針(多次調(diào)用旋轉(zhuǎn)的角度會(huì)疊加)
        // 大刻度盤需要繪制12個(gè)線條，表示12個(gè)小時(shí)，每次旋轉(zhuǎn)30度
        ctx.rotate(D30)   // 360 / 12 = 30
        ctx.beginPath()
        ctx.moveTo(radius, 0)
        ctx.moveTo(radius - 15, 0)  //大刻度長(zhǎng)度15px
        ctx.stroke()
      }
      // 繪制小刻度盤，線條粗細(xì)為1px
      ctx.setLineWidth(1)
      for(var i = 0; i < 60; ++i){
        // 小刻度盤需要繪制60個(gè)線條，表示60分鐘或60秒，每次旋轉(zhuǎn)6度
        ctx.rotate(D6)
        ctx.beginPath()
        ctx.moveTo(radius, 0)
        ctx.lineTo(radius - 10, 0) //小刻度盤長(zhǎng)度10px
        ctx.stroke()
      }
      //繪制文本
      ctx.setFontSize(20)  //字號(hào)
      ctx.textBaseline = 'middle'  // 文本垂直居中
      // 計(jì)算文本距離表盤中心點(diǎn)的半徑r
      var r = radius - 30
      for(var i = 1; i <= 12; ++i){
        // 利用三角函數(shù)計(jì)算文本坐標(biāo)
        var x = r * Math.cos(D30 * i - D90)
        var y = r * Math.sin(D30 * i - D90)
        if(i > 10){ // 調(diào)整11 和12位置
          // 在畫布上繪制文本 fillText(文本，左上角x坐標(biāo)，左上角y坐標(biāo))
          ctx.fillText(i, x - 12, y)
        } else {
          ctx.fillText(i, x-6, y)
        }
      }
    }
    //繪制指針部分
    function drawHand(ctx, radius){
      var t = new Date()    // 獲取當(dāng)前時(shí)間
      var h = t.getHours()  //小時(shí)
      var m = t.getMinutes() //分
      var s = t.getSeconds()  // 秒
      h = h > 12 ? h -12 :h    //將24小時(shí)制轉(zhuǎn)換為12小時(shí)制
      //時(shí)間從三點(diǎn)開(kāi)始，逆時(shí)針旋轉(zhuǎn)90度，指向12點(diǎn)
      ctx.rotate(-D90)
      //繪制時(shí)針
      ctx.save()   //記錄旋轉(zhuǎn)狀態(tài)
      // 計(jì)算時(shí)針指向的刻度
      // 通過(guò) 30度 * h 可以計(jì)算每個(gè)整點(diǎn)的旋轉(zhuǎn)角度
      // 如果時(shí)間不是整點(diǎn)，需要使用h + m / 60 + s / 3600 計(jì)算準(zhǔn)確的偏移度
      ctx.rotate(D30 * (h + m / 60 + s / 3600))
      ctx.setLineWidth(6)
      ctx.beginPath()
      ctx.moveTo(-20, 0)
      ctx.lineTo(radius / 2.6, 0)
      ctx.stroke()
      ctx.restore()
      // 繪制分針
      ctx.save()
      ctx.rotate(D6 * (m + s / 60))
      ctx.setLineWidth(4)
      ctx.beginPath()
      ctx.moveTo(-20, 0)
      ctx.lineTo(radius / 1.8, 0)
      ctx.stroke()
      ctx.restore()
      //繪制秒針
      ctx.save()
      ctx.rotate(D6 * s)
      ctx.setLineWidth(2)
      ctx.beginPath()
      ctx.moveTo(-20, 0)
      ctx.lineTo(radius / 1.6, 0)
      ctx.stroke()
      ctx.restore() 
    } 
  }
})