Wechat applet canvas draws a simple asymptotic color of the dashboard

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

    js part

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/2;

        let cicleCenterY=canvasHigth*11/20;

    

        // Draw background chassis

        ctx.beginPath();

        ctx.arc(cicleCenterX, cicleCenterY, 90,  0.8* Math.PI, 2.2* Math.PI)

        ctx.strokeStyle = '#ffa600';

        ctx.lineWidth = 4;  

        ctx.setLineDash([0]);

        ctx.stroke();

        

        ctx.fillStyle='#3366ff';

        ctx.textAlign='center';

        ctx.font='normal normal 16px  Microsoft YaHei ';

        ctx.fillText(' Issued ', cicleCenterX, cicleCenterY*3/4);

        ctx.font='normal blod 22px  Microsoft YaHei ';

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

        ctx.fillStyle='#e35702'; 

        ctx.font='normal normal 16px  Microsoft YaHei ';

        ctx.fillText(' Total bonus :1,000,000 element ', cicleCenterX, cicleCenterY*5/4);

        ctx.fillStyle='#e35702'; 

        ctx.font='normal normal 14px  Microsoft YaHei ';

        ctx.fillText(' Handle the business , You can get 10 element ', cicleCenterX, canvasHigth-5);

     

        ctx.font='normal normal 16px  Microsoft YaHei ';

        ctx.fillText(' Rush progress ', 50,30);

        // Draw the fill color section

        ctx.beginPath();

        ctx.rect(5, 10, 5, 25);

        ctx.fillStyle='#ffa600'; 

        ctx.fill();

      

        // Draw the fill color section

        ctx.beginPath();

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

        grd.addColorStop(0, '#ffa600')

        grd.addColorStop(1, 'red')

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

        ctx.strokeStyle = grd;

        ctx.lineWidth = 5;

        ctx.setLineDash([0]);

        ctx.stroke();

       });

  }

 

effect ：