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

最新推荐文章于 2024-04-01 16:46:43 发布

微枫1993

最新推荐文章于 2024-04-01 16:46:43 发布

阅读量1.4w

点赞数 4

分类专栏： web前端文章标签： html5 canvas

本文链接：https://blog.csdn.net/xiongqiangwin1314/article/details/48573245

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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>

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

点击打开链接

微枫1993

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
html5 canvas拓展clearRect()实现圆形区域清理

canvas提供的clearRect(x, y, width, height)方法只能清理出特定位置的矩形区域，以下代码则能实现对圆形区域的清理，主要是利用计算圆周率时的方法，将整个圆切成一个一个细小的正方形，然后再通过clearRect(x, y, width, height)方法将一个一个细小的正方形区域清理。 canvas{ border:1px solid b
复制链接

扫一扫