canvas 画绕圆心旋转的扇形

先看效果图（为了颜色对比明显，搭配的颜色比较丑，大家可根据项目修改颜色）：

上代码：

（1）css部分：

.middleCircle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 13rem;
      height: 13rem;
      border-radius: 50%;
      border: 3px solid #098fb7;
      margin: 117px;
    }

（2）html 部分：

 
        
            您的浏览器不支持html5dcanvas元素
        
    

（3）js 部分（需引入JQ，也可将JQ写法改成原生写法）：

var canvas=$('#mycanvas');//定义变量获取画布dom
  var c=mycanvas.getContext('2d');//设置绘图环境2d
  c.lineWidth=4;//设置线宽
  c.strokeStyle="rgba(206, 118, 83, 0.8)";   //设置边颜色
  c.fillStyle="rgba(206, 118, 83, 0.8)";     //扇形
  c.moveTo(130,130);
  c.arc(130,130,130,Math.PI*5/6,Math.PI*1.5,false);
  c.moveTo(130,130);
  c.arc(130,130,130,Math.PI*7/6,Math.PI*1.5,false);
  c.fill()
  c.beginPath();
  c.lineWidth=3;
  c.strokeStyle="rgba(217, 242, 245, 0.5)";
  var waitTime = 1;
  var waitInterval = setInterval(() => {   // 让扇形转动
    waitTime++;
    $('#mycanvas').css("transform", "rotate("+ waitTime +"deg)");
  }, 100)