1.9 微信小程序 使用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