本文例項為大家分享了微信小程式使用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,radius,2 * Math.PI,true)
      ctx.stroke()   //畫線
      // 繪製同心圓
      // 中心圓的半徑為8px 線條粗細為1px
      ctx.setLineWidth(1)  //設定線條粗細
      ctx.beginPath()  //開始一個新路徑
      ctx.arc(0,8,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個http://www.cppcns.com線條，表示60分鐘或60秒，每次旋轉6度
        ctx.rotate(D6)
        ctqZhFJG
 
x.beginPath()
        ctx.moveTo(radius,0)
        ctx.lineTo(radius - 10,0) //www.cppcns.com小刻度盤長度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位置
          // 在qZhFJG畫布上繪製文字 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() 
    } 
  }
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。