微信小程序使用canvas画圆环进度条_小程序createcanvascontext 基础库版本 2.9.0 起已废弃,请使用 canvas

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

1、代码参考：https://segmentfault.com/a/1190000013219501，文章内容很清晰。

2、问题：

使用这种方式将会提醒：

从基础库 2.9.0 开始，本接口停止维护，请使用 Canvas 代替

参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html

3、改进：

由于最开始推荐的文章已经有了wxss和wxml代码，我只展示做过改进的js代码

// 1、背景圆环
  drawProgressbg: function(){
    // 使用 wx.createContext 获取绘图上下文 context
    let ctx
    wx.createSelectorQuery().select('.progress_bg').context(function (res) {
      ctx = res.context
      ctx.setLineWidth(25); // 设置圆环的宽度
      ctx.setStrokeStyle('#EAEAEA'); // 设置圆环的颜色
      ctx.setLineCap('round') // 设置圆环端点的形状
      ctx.beginPath(); //开始一个新的路径
      ctx.arc(70, 70, 50, 0, 2 * Math.PI, false);
      //设置一个原点(70,70)，半径为50的圆的路径到当前路径
      ctx.stroke(); //对当前路径进行描边
      ctx.draw();
    }).exec()
  },
  // 2、进度条圆环
  drawCircle: function (step){ 
    let context
    wx.createSelectorQuery().select('.progress_canvas').context(function (res) {
      // 设置渐变
      context = res.context
      // 设置渐变
      let gradient = context.createLinearGradient(200, 100, 100, 200);
      gradient.addColorStop("0", "#04C1BF");
      gradient.addColorStop("1", "#04C1BF");
      context.setLineWidth(25);
      context.setStrokeStyle(gradient);
      context.setLineCap('line')
      context.beginPath(); 
      // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
      context.arc(70, 70, 50, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
      context.stroke(); 
      context.draw() 
    }).exec()
  },
  // 3、获取数据方法
  async getCustTask() {
    // 获取数据成功后调用进度条圆环方法
    // 传的值是0-2之间，1是指50%
     this.drawCircle(1)
    }
  },
  onLoad: function (options) {
    this.getCustTask() //获取数据的方法
    this.drawProgressbg() //外部圆环方法
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

结果展示