微信小程序，canvas 15秒 畫一個圓，支持暫停、開啓

小程序中可能會遇到需要畫一個類似於計時器的圓，這裏是一個 demo，可以拿走根據自己的業務需求進行調整。

代碼比較簡單，重點還是寫代碼的時候注意幾點原則吧：

1，每個方法不要超過30行

2，有重複的邏輯，考慮抽取共有方法

3，初始化的變量，可以不設置，使用默認值

wxml代碼

<canvas style="width:200px; height:200px;" canvas-id="myCanvas"></canvas>
<view bindtap="startOrStopDraw">{{drawActive}}</view>

js代碼

var app = getApp();

var drawInterval = false;
Page({
  data: {
    drawActiveArr:['STOP', 'START'],
    start: - Math.PI / 2,
    stop: - Math.PI / 2,
    drawIndex: 1 //默認按鈕處於 點擊開始畫圓 狀態
  },
  
  onLoad: function (options) {
    this.myCanvas();//畫布
  },
  /** 畫布 開始*/ 
  startOrStopDraw: function(){
    //依次動作：停止畫圓、開始畫圓
    var index = this.data.drawIndex;
    // if(index > 0){
    //   //開始
    //   this.draw();
    // }else{
    //   //停止
    //   if (drawInterval){
    //     clearInterval(drawInterval);
    //   }
    // }
    //上面 if 判斷流程的縮減寫法
    index > 0 ? this.draw() : drawInterval ? clearInterval(drawInterval) : false;
    index = (index + 1) % 2;
    this.setDrawActiveData(index);
  },
  init: function(){
    this.setDrawActiveData(this.data.drawIndex ? this.data.drawIndex : 0);
  },
  setDrawActiveData: function (drawIndex){
    this.setData({
      drawActive: this.data.drawActiveArr[drawIndex], 
      drawIndex: drawIndex
    });
  },

  myCanvas: function(){
    this.init();
    // this.draw();
  },
  // 獲取 stop 值，然後計算下一幀的值，再繼續畫
  // 15 s 畫一圈 15 000 = 40 * 375
  draw: function (){
    const ctx = wx.createCanvasContext('myCanvas');
    var x = 100, y = 100, r = 50;
    var start = this.data.start;
    var stop = this.data.stop; 
    var _this = this;
    var callback = function () {
      stop += (2 * Math.PI) / 375
      stop = _this.getStop(stop);
      _this.setStop(stop);
      _this.myDraw(ctx, x, y, r, start, stop);
    }
    drawInterval = setInterval(callback, 40);
  },
  setStop: function(stop){
    this.setData({
      stop: stop
    });
  },
  getStop: function(stop){
    return stop > (2 * Math.PI - Math.PI / 2) ? (2 * Math.PI) / 150 - Math.PI / 2 : stop;
  },
  myDraw: function(ctx, x, y, r, start, stop){
    ctx.arc(x, y, r, start, stop);
    ctx.setStrokeStyle('#0cc');
    ctx.setLineWidth(5);
    ctx.stroke();
    ctx.draw();
  }
  /** 畫布 結束*/
})