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

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()实现圆形区域清理