canvas 画圆实现为什么周边没有去掉?
发布网友
发布时间：2022-04-22 21:06
共1个回答
热心网友
时间：2022-04-20 00:29
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>
