水球图为什么，支付宝和微信的显示的不一样啊

<canvas class="liquid" style="width: 100%;height: 100%;" canvas-id="liquid" id="liquid"></canvas>  

    onReady() {  
      // #ifdef MP-WEIXIN  
            const query = uni.createSelectorQuery().in(this);  
      query.select('#liquid').boundingClientRect(data => {  
        console.log(123456,data)  
        this.options = {  
          value: this.list.SOC_DZM||0,  
          a: 10, //振幅  
          pos: [data.width / 2, data.height / 2], //水球图位置  
          r: data.height / 2, //水球图半径  
          color: ['rgba(141,179,250,0.5)', 'rgba(74,134,255,0.6)'],  
          w: data.width,  
          h: data.height,  
        }  
        this.drawBollWave('liquid', this.options);  
      }).exec();  
      // #endif  

      // #ifdef MP-ALIPAY  
      console.log('dizhi')  
      my.createSelectorQuery().select('#liquid').boundingClientRect().exec(ret=>{  
        console.log(456789,ret[0])  
          this.options = {  
            value: this.list.SOC_DZM||0,  
            a: 10, //振幅  
            pos: [ret[0].width / 2, ret[0].height  / 2], //水球图位置  
            r: ret[0].height  / 2, //水球图半径  
            color: ['rgba(141,179,250,0.5)', 'rgba(74,134,255,0.6)'],  
            w: ret[0].width ,  
            h: ret[0].height ,  
          }  
          this.drawBollWave('liquid', this.options);  
      })  

      // #endif  

      this.list = uni.getStorageSync('dataSocket')  
        },  

drawBollWave(ids, options) {  
                let context = uni.createCanvasContext(ids);  
                //生成水波动画参数  
                const createParams = (ops) => {  
                    ops.w = []; //存储水波的角速度  
                    ops.theta = []; //存储每条水波的位移  
                    for (let i = 0; i < 2; i++) {  
                        ops.w.push(Math.PI / (100 + 20 * Math.random()));  
                        ops.theta.push(20 * Math.random());  
                    }  
                }  
                const drawWaterLines = (ops) => {  
                    context.translate(0, options.pos[1]);  
                    let offset;  
                    let A = ops.a; //正弦曲线振幅  
                    let y, x, w, theta;  
                    let r = ops.r;  
                    //遍历每一条水纹理  
                    for (let line = 0; line < 2; line++) {  
                        context.save();  
                        //每次绘制时水波的偏移距离  
                        //   theta = Math.random();  
                        offset = r + A / 2 - (r * 19 / 8 + A) * (ops.value / 100) + line * r / 20;  
                        //获取正弦曲线计算参数  
                        w = ops.w[line];  
                        theta = ops.theta[line];  
                        context.fillStyle = ops.color[line];  
                        context.moveTo(0, 0);  
                        context.beginPath();  
                        for (x = 0; x <= 2 * r; x += 0.4) {  
                            y = A * Math.sin(w * x + theta) + offset + 10;  
                            //绘制点  
                            context.lineTo(x, y);  
                        }  
                        //绘制为封闭图形  
                        context.lineTo(x, r);  
                        context.lineTo(x - 2 * r, r);  
                        context.lineTo(0, A * Math.sin(theta));  
                        context.closePath();  
                        //填充封闭图形  
                        context.fill();  
                    }  
                    context.clip();  
                    context.setFontSize(45)  
                    context.setTextAlign("center");  
                    context.fillText(parseInt(ops.value, 10) + '%', r, -10)  
                    context.setFillStyle('#fff')  
                    context.setFontSize(16)  
                    context.fillText('电池余量', r, 20)  
                }  
                const startAnim = () => {  
                    options.theta = options.theta.map(item => item - 0.03);  
                    options.value += options.value >= this.quantity ? 0 : 1;  
                    resetClip(options); //剪切绘图区  
                    context.setFillStyle('#2985FF')  
                    context.setFontSize(45)  
                    context.setTextAlign("center");  
                    context.fillText(parseInt(options.value, 10) + '%', options.r, options.r - 10)  
                    context.setFillStyle('#999')  
                    context.setFontSize(16)  
                    context.fillText('电池余量', options.r, options.r + 20)  
                    drawWaterLines(options); //绘制水波线  
                    context.restore();  
                    context.draw()  
                    this.bollTimeR = setTimeout(() => {  
                        startAnim();  
                    }, 1000 / 65)  
                }  

                const resetClip = (ops) => {  
                    context.clearRect(0, 0, ops.w, ops.h)  
                    let r = ops.r;  
                    let grd = context.createCircularGradient(ops.pos[0], ops.pos[1], r);  
                    grd.addColorStop(0.8, '#fff');  
                    grd.addColorStop(1, '#CBDEFC');  
                    context.save();  
                    context.beginPath();  
                    context.setStrokeStyle('#fff');  
                    context.setFillStyle(grd);  
                    context.arc(ops.pos[0], ops.pos[1], ops.r, 0, 2 * Math.PI);  
                    context.closePath();  
                    context.fill();  
                    context.stroke();  
                    context.clip();  
                }  

                createParams(options);  

                this.bollTimeR = setTimeout(() => {  
                    startAnim();  
                }, 1000 / 65)  
            },