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

canvas提供的clearRect(x, y, width, height)方法只能清理出特定位置的矩形区域，以下代码则能实现对圆形区域的清

理，主要是利用计算圆周率时的方法，将整个圆切成一个一个细小的正方形，然后再通过clearRect(x, y, width, height)

方法将一个一个细小的正方形区域清理。

canvas{ border:1px solid black;}

body{ margin:0;padding:0;}

var canvas=document.getElementById('canvas');

var context=canvas.getContext('2d');

context.beginPath();

context.fillStyle="blue";

context.arc(200,200,100,0,360*Math.PI/180);

context.fill();

function clearArc(x,y,radius){//圆心(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){

context.clearRect(posX,posY,widthX,heightY);

stepClear+=1;

clearArc(x,y,radius);

}

}

var stepClear=1;//别忘记这一步

clearArc(210,230,50);

懒得复制黏贴的可以移步至此下载源文件

点击打开链接