// components/arc.js


let mytime = "";
let n = 0;
var w = "";
var h = "";
Component({
  /**
   * 组件的属性列表
   */
  properties: {


  },


  /**
   * 组件的初始数据
   */
  data: {
    score: 100, //传入的进度， 0~100，绘制到此参数处停止。


  },
  attached() {
    console.log(this,211)
    const ctx = wx.createCanvasContext("bgCanvas", this); //创建一个全局的canvas绘图上下文
    const ctx2 = wx.createCanvasContext("runCanvas", this);
    this.setData({
      ctx,
      ctx2
    })


    let that = this;
    let allSrc = 0.015 * that.data.score; //应该绘制的弧度
    let src = allSrc / 100 //计算出每个间隔应该绘制多少弧度。 


    this.setData({
      src: src,
      allSrc: allSrc
    }, res => {


    })
  },


  ready() {
    let that = this


    let query = wx.createSelectorQuery().in(this)
    query.select('#canvas-one').boundingClientRect(function (rect) { //监听canvas的宽高


      w = parseInt(rect.width / 2); //获取canvas宽的的一半
      h = parseInt(rect.height / 2); //获取canvas高的一半，
      //获取宽高的一半是为了便于找到中心点


      let ctx = that.data.ctx
      ctx.arc(w, h, w - 8, 0.75 * Math.PI, 2.25 * Math.PI); //绘制圆形弧线
      ctx.setStrokeStyle("#dddddd"); //设置填充线条颜色
      ctx.setLineWidth("8"); //设置线条宽度
      ctx.setLineCap("round"); //设置线条端点样式
      ctx.stroke(); //对路径进行描边，也就是绘制线条。


      ctx.draw(); //开始绘制
    }).exec()
  },
  /**
   * 组件的方法列表
   */
  methods: {


    run(e) {
      let that = this;


      let src = that.data.src; //每个间隔所需绘制的弧度


      let allSrc = that.data.allSrc; //总共需要绘制的弧度
      n++;
      if (src * n > allSrc) {
        clearInterval(mytime); //如果绘制完成，停掉计时器，绘制结束
        n = 0;
        return;
      }


      let ctx2 = this.data.ctx2
      let grade = Math.round(src * n / 1.5 * 100); //百分数
      ctx2.arc(w, h, w - 8, 0.75 * Math.PI, (0.75 + src * n) * Math.PI); //每个间隔绘制的弧度
      ctx2.setStrokeStyle("#84D944");
      ctx2.setLineWidth("8");
      ctx2.setLineCap("round");
      ctx2.stroke();
      ctx2.beginPath();
      ctx2.setFontSize(40); //注意不要加引号
      ctx2.setFillStyle("#84D944");
      ctx2.setTextAlign("center");
      ctx2.setTextBaseline("middle");
      ctx2.fillText(grade + "%", w, h);



      ctx2.draw();
    },
    canvasTap() {
      let that = this;
      clearInterval(mytime);
      mytime = setInterval(that.run.bind(this), 50)
    }
  }
})
<!--components/arc.wxml-->


 <view class='content'> 
  <canvas canvas-id='bgCanvas'  type = "2d" id='canvas-one'  class='canvasI'></canvas>
  <canvas canvas-id="runCanvas" type ="2d" class='canvasII'></canvas>
  <button size='mini' type='default' class='btn' style='padding:0;' catchtap='canvasTap'>点击绘制</button>
 </view>