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()實現圓形區域清理

Canvas---clearRect()清除圓形區域