Canvas---clearRect()清除圆形区域

Posted 2020-11-17 waterfowl

function clearArcFun(x,y,r,cxt){    //(x,y)为要清除的圆的圆心，r为半径，cxt为context
   var stepClear=1;//别忘记这一步  
   clearArc(x,y,r);
   function clearArc(x,y,radius){
      var calcWidth=radius-stepClear;  
      var calcHeight=Math.sqrt(radius*radius-calcWidth*calcWidth);  

      var posX=x-calcWidth;  
      var posY=y-calcHeight;  
                      
      var widthX=2*calcWidth;  
      var heightY=2*calcHeight;  
                      
      if(stepClear<=radius){  
         cxt.clearRect(posX,posY,widthX,heightY);  
         stepClear+=1;  
         clearArc(x,y,radius);  
      }  
    }  
}

利用的方法是将圆形切成很多个平行的矩形，然后从中间到圆的两端进行逐渐递减的操作

代码引用自：

html5 canvas拓展clearRect()实现圆形区域清理