clock/pages/index/index.js

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */

   width: 0,
   height: 0,

  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function() {
    //获取系统信息
    wx.getSystemInfo({
      //获取系统信息成功，保存获取到的系统窗口的宽高
      success: res => {
        this.width = res.windowWidth
        this.height = res.windowHeight
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  timer: null,
  onReady: function() {
    //创建ctx实例
    var ctx = wx.createCanvasContext('myCanvas')
    //将角度转换为弧度，方便后续使用
    //计算公式：弧度 = 角度 * 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
    //计算表盘半径，留出30px外边框
    var radious = width / 2 - 30
    //每秒绘制一次
    draw()
    this.timer = setInterval(draw, 1000)
    //绘制函数
    function draw() {
      //设置坐标轴原点为窗口的中心点
      ctx.translate(width / 2, height / 2)
      //绘制表盘
      drawClock(ctx, radious)
      // 绘制指针
      drawHand(ctx, radious)
      // 绘制执行
      ctx.draw()
    }
    //绘制表盘部分
    function drawClock(ctx, radious) {
    }
    // 绘制指针部分
    function drawhand(ctx, radious) {
    }
    function drawClock(ctx, radious) {
      // 绘制大圆
      // 大圆的半径为radious，线条粗细为2px
      ctx.setLineWidth(2)
      ctx.beginPath()
      ctx.arc(0, 0, radious, 0, 2 * Math.PI, true)
      ctx.stroke()
      // 绘制中心圆
      // 中心圆的半径为8px， 线条粗细为1px
      ctx.setLineWidth(1)
      ctx.beginPath()
      ctx.arc(0, 0, 8, 0, 2 * Math.PI, true)
      ctx.stroke()
      // 绘制大刻度盘，线条粗细为5px
      ctx.setLineWidth(5)
      for (var i = 0; i < 12; i++) {
        // 以原点为中心顺时针旋转（多次调用旋转的角度会叠加）
        // 大刻度盘需要绘制12个线条，表示12个小时，每次旋转30度
        ctx.rotate(D30)
        ctx.beginPath()
        ctx.moveTo(radious, 0)
        ctx.lineTo(radious - 15, 0)
        ctx.stroke()
      }
      // 绘制小刻度盘，线条粗细为1px
      ctx.setLineWidth(1)
      for (var i = 0; i < 60; i++) {
        // 小刻度盘需要绘制60个线条，表示60分钟或60秒，每次旋转6度
        ctx.rotate(D6)
        ctx.beginPath()
        ctx.moveTo(radious, 0)
        ctx.lineTo(radious - 10, 0)
        ctx.stroke()
      }
      // 绘制文本
      ctx.setFontSize(20)
      ctx.textBaseline = 'middle'
      // 计算文本距离表盘中心的半径r
      var r = radious - 30
      for(var i = 1; i <= 12; ++i) {
        // 利用三角函数计算文本坐标
        var x = r * Math.cos(D30 * i - D90)
        var y = r * Math.sin(D30 * i - D90)
        if (i > 10) {
          // 调整11和12的位置
          // 在画布上绘制文本fillText（文本，左上角x坐标，左上角y坐标
          ctx.fillText(i, x - 12, y)
        }else {
          ctx.fillText(i, x - 6, y)
        }
      }
    }
    function drawHand(ctx, tadious) {
      var t = new Date()
      var h = t.getHours()
      var m = t.getMinutes()
      var s = t.getSeconds()
      h = h > 12 ? h - 12 : h
      // 时间从3点开始，逆时针旋转90度，指向12点
      ctx.rotate(-D90)
      // 绘制时针
      ctx.save()
      // 计算时针指向的刻度
      // 通过30度*h可以计算每个整点的旋转角度
      // 如果时间不是整点，需要使用h + m/60+s/3600计算准确的偏移度
      ctx.rotate(D30 * (h + m / 60 + s /3600))
      ctx.setLineWidth(6)
      ctx.beginPath()
      ctx.moveTo(-20, 0)
      ctx.lineTo(radious / 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(radious / 1.8, 0)
      ctx.stroke()
      ctx.restore()
      // 绘制秒针
      ctx.save()
      ctx.rotate(D6 * s)
      ctx.setLineWidth(2)
      ctx.beginPath()
      ctx.moveTo(-20, 0)
      ctx.lineTo(radious / 1.6, 0)
      ctx.stroke()
      ctx.restore()
    }
  },



  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})