canvas拓展实现圆形区域清理

相关文章推荐

挂过科的太阳 · 上海交通大学心理学院高层次人才招聘启事-上海 ...· 3 月前 ·

八块腹肌的机器人 · 京九高铁走向确定 ...· 8 月前 ·

坏坏的骆驼 · 香港民生银行激活账户详细流程！转账限额说明 ...· 1 年前 ·

聪明伶俐的电影票 · C++ 测试框架 GoogleTest ...· 1 年前 ·

纯真的松球 · 制冷行业人人必备的设计与仿真软件大全！（附下 ...· 1 年前 ·

有两种方法：

第一种：clearRect()的方法

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

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

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

<!DOCTYPE html>
        <style>
            canvas{ border:1px solid black;}
            body{ margin:0;padding:0;}
        </style>
    </head>
        <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分别代表圆的坐标和半径