基础库版本号2.9.5

代码：

wml :

 <view class="mainTwo">

  <canvas    type="2d" id="myCanvas" class="secondView" >  </canvas

  </view>

 </view>

js:

    //获取第二个view宽高

       wx.createSelectorQuery().select('.secondView').boundingClientRect(res=> {

        this.setData({

        canvasHigth:res.height,  

        canvasWidth:res.width

      })

      }).exec(res=>{

        this.drawCanvas(this.data.canvasWidth,this.data.canvasHigth);

      });

drawCanvas: function (canvasWidth,canvasHigth){

    wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec(res => {

        const canvas = res[0].node;

        const ctx = canvas.getContext('2d');

        canvas.width=canvasWidth;

        canvas.height=canvasHigth;

        let cicleCenterX=canvasWidth/8*5;

        let cicleCenterY=canvasHigth*4/6;

        

        //绘制字体

        ctx.beginPath();

        ctx.fillStyle='#ff8300';

        ctx.textAlign='center';

        ctx.font='normal normal 16px 微软雅黑';

        ctx.fillText('88,888元', cicleCenterX, cicleCenterY);

        ctx.stroke();

        ctx.closePath();

        //绘制背景底盘

        ctx.beginPath();

        　　//阴影

        ctx.shadowOffsetX='1';

        ctx.shadowOffsetY='2';

        ctx.shadowColor='#9e9e9e';

        ctx.shadowBlur='3';

        ctx.arc(cicleCenterX, cicleCenterY, cicleCenterX/2,  0.8* Math.PI, 2.2* Math.PI);

        //上色

        ctx.strokeStyle = '#888df5';

        ctx.lineWidth = 4;  

        ctx.setLineDash([0]);

      

        ctx.stroke();

        ctx.closePath();

        

        //绘制填充颜色部分

        ctx.beginPath();

        const grd = ctx.createLinearGradient(0, 0, 200, 0)

        grd.addColorStop(0, '#fea75c');

        grd.addColorStop(1, '#fea75c');

        ctx.arc(cicleCenterX, cicleCenterY, cicleCenterX/2, 0.8* Math.PI, 1.6* Math.PI);

        ctx.strokeStyle = grd;

        ctx.lineWidth = 5;

        ctx.setLineDash([0]);

        ctx.stroke();

        ctx.closePath();

        });

  }

真机显示：