有两种方法：
第一种：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 From： https://www.cnblogs.com/heibaiqi/p/16643492.html