html5 canvas拓展clearRect()实现圆形区域清理

最新推荐文章于 2024-03-26 15:37:50 发布

原创最新推荐文章于 2024-03-26 15:37:50 发布 · 1.4w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #canvas

web前端专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas API清除圆形区域内填充颜色的方法。通过递归调用clearArc函数，将圆分解为一系列小矩形，再利用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>

懒得复制黏贴的可以移步至此下载源文件

点击打开链接