canvas拓展实现圆形区域清理

2022-08-31 16:33:45 阅读：271 来源： 互联网

标签：canvas calcWidth 清理 ctx 圆形 radius context var

有两种方法：

第一种：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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

canvas拓展 实现圆形区域清理

canvas拓展实现圆形区域清理