微信小程序 canvas 画简单的仪表盘 渐近色

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

    js部分

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;

    

        //绘制背景底盘

        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 微软雅黑';

        ctx.fillText('已发放', cicleCenterX, cicleCenterY*3/4);

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

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

        ctx.fillStyle='#e35702'; 

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

        ctx.fillText('总奖金:1,000,000元', cicleCenterX, cicleCenterY*5/4);

        ctx.fillStyle='#e35702'; 

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

        ctx.fillText('办理业务，每笔均可获得10元', cicleCenterX, canvasHigth-5);

     

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

        ctx.fillText('抢盘进度', 50,30);

        //绘制填充颜色部分

        ctx.beginPath();

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

        ctx.fillStyle='#ffa600'; 

        ctx.fill();

      

        //绘制填充颜色部分

        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();

       });

  }

 

效果：