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

来源：互联网发布：java运算符重载编辑：程序博客网时间：2024/05/26 15:54

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

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

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

<!DOCTYPE html><html><head><style>canvas{ border:1px solid black;}body{ margin:0;padding:0;}</style></head><body><canvas id="canvas" width="400" height="400"></canvas><script>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)，半径radiusvar 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);</script></body></html>

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

点击打开链接

0 0