uniapp 移动端 用Canvas 画背景凸起圆弧

移动端屏幕宽度

uni.getSystemInfo({
              success: function (res) {
                  console.log(res.screenWidth);
              }
      });    

//扇形画法
        let angle = Math.PI*2
        let eAngle = angle
        ctx.beginPath()
        ctx.moveTo(0, 300);
        ctx.fillStyle='#3F76E1'
        ctx.arc(width/2, 0, width/2,0, eAngle);
        ctx.fill()
        ctx.draw()

     //圆弧画法

         //开始新路径
             ctx.beginPath();
             ctx.moveTo(0,0);
             ctx.rect(0,0,width,width/2+20);
             ctx.fillStyle='#3F76E1'
             ctx.fill();
             //开始新路径
             ctx.beginPath();
            //指定起点
             ctx.moveTo(0,width/2+20);
               //绘制二次贝塞尔曲线
             ctx.quadraticCurveTo(width/2,width/2+120,width,width/2+20);
             //显示路径
              ctx.fillStyle='#3F76E1'
              ctx.fill();
              ctx.draw()