首页 > 其他分享> > canvas拓展实现圆形区域清理

canvas拓展实现圆形区域清理

2022-08-31 16:33:45 作者：互联网

有两种方法：

第一种：clearRect()的方法

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)，半径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);
        </script>
    </body>
</html>

实现的效果不是很好，有好多模糊的部分，尤其放大以后，好多矩形

第二种cli()的方法：

     ctx.beginPath();
     ctx.rect(0, 0, canvas.width, canvas.height); 
     ctx.arc(x,y,r,0,Math.PI * 2,true);//顺时针方向
     ctx.clip();
     ctx.closePath();
     ctx.fillStyle="rgba(255,255,255,0.7)";
     ctx.fillRect(0, 0, canvas.width, canvas.height);

图中x,y,r分别代表圆的坐标和半径

标签：canvas,calcWidth,清理,ctx,圆形,radius,context,var
来源： https://www.cnblogs.com/heibaiqi/p/16643492.html

canvas拓展 实现圆形区域清理

canvas拓展实现圆形区域清理