clock/pages/index/index.js

Page({
  width:0,
  height:0,
  onLoad:function(){
    //获取系统信息
    wx.getSystemInfo({
      //获取系统信息成功，保存获取到的系统窗口的窗高
      success:res=>{
        this.width=res.windowWidth
        this.height=res.windowWidth
      }
    })
  },
  timer:null,
  onReady: function () {
    //创建ctx实例
    var ctx =wx.creatCanvasContext('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 radius=width/2-30
    //每秒绘制一次
    draw ()
    this.timer=setInterval(draw,1000)
    //绘制函数
    function draw(){
      //设置坐标轴原点为窗口的中心点
      ctx.translate(width/2,height/2)
      //绘制表盘
      drawClock(ctx,radius)
      //绘制指针
      drawHand(ctx,radius)
      //执行绘制
      ctx.draw()
    }
    //绘制表盘部分
    function drawClock(ctx,radius){

    }
    //绘制指针部分
    function drawHand(ctx,radius){
    }
    function drawClock(ctx,radius){
      ctx.setLinWidth(2)
      ctx.beginpath()
      ctx.arc(0,0,radius,0,2*Math.PI,true)
      ctx.setLineWidth(1)
      ctx.beginPath()
      ctx.arc(0,0,8,0,2*Math.PI,true)
      ctx.stroke()
      ctx.setLineWidth(5)
      for(var i=0;i<12;++i){
        ctx.rotate(D30)
        ctx.beginPath()
        ctx.moveTo(radius,0)
        ctx.lineTo(radius-15,0)
        ctx.stroke()
      }
      ctx.setLineWidth(1)
      for(var i=0;i<60;++i){
        ctx.rotate(D6)
        ctx.beginPath()
        ctx.moveTo(radius,0)
        ctx.lineTo(radius-10,0)
        ctx.stroke()
      }
      ctx.setFontSize(20)
      ctx.textBaseline='middle'
      var r=radius-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){
          ctx.fillText(i,x-12,y)
        }else{
          ctx.fillText(i,x-6,y)
        }
      }
    }
    function drawHand(ctx,radius){
      var t=new Date()
      var h=t.getHours()
      var m=t.getMinutes()
      var s=t.getSeconds()
      h=h>12?h-12:h
      ctx.rotate(-D90)
      ctx.save()
      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()
    }    
  }
})