위 챗 애플 릿 은 canvas 로 시 계 를 그립 니 다.

본 논문 의 사례 는 위 챗 애플 릿 이 canvas 를 사용 하여 시 계 를 그 리 는 구체 적 인 코드 를 공유 하 였 으 며,구체 적 인 내용 은 다음 과 같다.
아 날로 그 시계
canvas 를 이용 하여 시 계 를 그립 니 다.시 계 는 시간 과 시스템 시간 이 일치 하고 눈금 은 24 시간 제 를 12 시간 제로 바 꿉 니 다.중심 원,바깥쪽 큰 원,분침,시침,초침 을 각각 그 려 야 합 니 다.
효과 도 는 다음 과 같다.

코드 는 다음 과 같 습 니 다:
index.wxml

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

index.wxss

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

index.js

Page({
  width: 0,  //    
  height: 0,  //    
  onLoad: function () {
    //       
    wx.getSystemInfo({
      //         ，             
      success: res => {
        // console.log(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 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){
      //     
      //       radius      2px
      ctx.setLineWidth(2)  //      
      ctx.beginPath()  //       
      ctx.arc(0, 0, radius, 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)   // 360 / 12 = 30
        ctx.beginPath()
        ctx.moveTo(radius, 0)
        ctx.moveTo(radius - 15, 0)  //     15px
        ctx.stroke()
      }
      //       ，     1px
      ctx.setLineWidth(1)
      for(var i = 0; i < 60; ++i){
        //         60   ，  60   60 ，    6 
        ctx.rotate(D6)
        ctx.beginPath()
        ctx.moveTo(radius, 0)
        ctx.lineTo(radius - 10, 0) //      10px
        ctx.stroke()
      }
      //    
      ctx.setFontSize(20)  //  
      ctx.textBaseline = 'middle'  //       
      //               r
      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){ //   11  12  
          //          fillText(  ，   x  ，   y  )
          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    // 24      12   
      //       ，     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(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() 
    } 
  }
})

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.