先说一下想要的效果

这是在别人的  数据都是渲染的   这样的效果是正确的

这个是我的  用canvas做的值出现一个  位置是固定的  

我的代码是：

wxml:

<canvas class="progress_bg" canvas-id="canvasProgressbg" id='canvasProgressbg'> </canvas>

<canvas class="progress_canvas" canvas-id="canvasProgress"> </canvas>

wxjs

drawProgressbg: function () {

// 使用 wx.createContext 获取绘图上下文 context

var ctx = wx.createCanvasContext('canvasProgressbg')

ctx.setLineWidth(4);// 设置圆环的宽度

ctx.setStrokeStyle('#fff'); // 设置圆环的颜色

ctx.setLineCap('round') // 设置圆环端点的形状

ctx.beginPath();//开始一个新的路径

ctx.arc(20,20, 50, 1 * Math.PI, 0 * Math.PI, false);

//设置一个原点(110,110)，半径为100的圆的路径到当前路径

ctx.stroke();//对当前路径进行描边

ctx.draw();

},

drawCircle: function (step) {

var context = wx.createCanvasContext('canvasProgress', this);

// 设置渐变

var gradient = context.createLinearGradient(200, 100, 100, 200);

gradient.addColorStop("0", "#2661DD");

// gradient.addColorStop("0.5", "#40ED94");

// gradient.addColorStop("1.0", "#5956CC");

context.setLineWidth(4);

context.setStrokeStyle(gradient);

context.setLineCap('round')

context.beginPath();

// 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定

context.arc(20,20, 50, 1 * Math.PI, step * Math.PI, false);

context.stroke();

context.draw()

},

别人的小程序是用canvas绘制成的吧 （我不知道是不是）  求大佬帮忙解决  感谢