微信小程序canvas画圆环形进度条

最近做一个小程序，有用到canvas画圆环形进度条，效果图就是上图了。
为了方便日后使用，我已经封装了一个独立的js文件。
先简单说一下实现流程，封装好的文件下载地址：https://github.com/SuperDalu/wxCanvas.git

1. 先在wxml文件中创建画布

<canvas canvas-id="runCanvas" id="runCanvas" class='canvas'></canvas>

2. 在js文件中初始化画布

const ctx2 = wx.createCanvasContext(id);

3. 通过给canvas组件绑定boundingRect方法监听canvas容器的宽高
   获取到canvas容器的宽高的一半以确定圆心的位置

wx.createSelectorQuery().select('#'+id).boundingClientRect(function (rect) { //监听canvas的宽高
	console.log(rect);
        var w = parseInt(rect.width / 2); //获取canvas宽的的一半
        var h = parseInt(rect.height / 2); //获取canvas高的一半，
      }).exec();

4. 然后就可以开始画图。
   先把进度条画出来，再去写动画。

run(c, w, h) {  //c是圆环进度百分比   w，h是圆心的坐标
      let that = this;
      var num = (2 * Math.PI / 100 * c) - 0.5 * Math.PI;
      //圆环的绘制
      ctx2.arc(w, h, w - 8, -0.5 * Math.PI, num); //绘制的动作
     ctx2.setStrokeStyle("#ff5000"); //圆环线条的颜色
      ctx2.setLineWidth("16");	//圆环的粗细
      ctx2.setLineCap("butt");	//圆环结束断点的样式  butt为平直边缘 round为圆形线帽  square为正方形线帽
      ctx2.stroke();
      //开始绘制百分比数字
      ctx2.beginPath();
      ctx2.setFontSize(40); // 字体大小 注意不要加引号
      ctx2.setFillStyle("#ff5000");	 // 字体颜色
      ctx2.setTextAlign("center");	 // 字体位置
      ctx2.setTextBaseline("middle");	 // 字体对齐方式
      ctx2.fillText(c + "%", w, h);	 // 文字内容和文字坐标
      ctx2.draw();
    },

实现动画效果。
实现动画效果其实使用定时器控制run方法一直执行。

canvasTap(start, end, time, w, h) {  //传入开始百分比和结束百分比的值，动画执行的时间，还有圆心横纵坐标
    var that = this;
    start++;
    if (start > end) {
      return false;
    }
    that.run(start, w, h); //调用run方法
    setTimeout(function () {
      that.canvasTap(start, end, time, w, h);
    }, time);
  },

这就基本实现了圆环进度条的绘制。

demo和封装好的js文件请到GitHub上下载，下载地址：https://github.com/SuperDalu/wxCanvas.git
小程序方法的封装和调用我在之前的博客中有写到过，博客地址：https://blog.csdn.net/weixin_41257563/article/details/82792194