HTML5学习第17篇——非零环绕

最新推荐文章于 2022-03-03 00:43:10 发布

水晶果冻1125

最新推荐文章于 2022-03-03 00:43:10 发布

阅读量435

点赞数

分类专栏： # HTML5 文章标签： html5 非零环绕

本文链接：https://blog.csdn.net/m0_37617778/article/details/84973633

版权

HTML5 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1、非零环绕原则

非零环绕原则：
　　如果需要判断某一个区域是否需要填充颜色，就从该区域中随机的选取一个点。从这个点拉一条直线出来, 一定要拉到图形的外面. 此时以该点为圆心。看穿过拉出的直线的线段，如果是顺时针方向就记为 +1, 如果是逆时针方向，就记为 -1。最终看求和的结果. 如果是 0 就不填充，如果是非零就填充。

3、非零环绕示例

示例1

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas 非零环绕</title>
</head>
<body>
	<canvas width="800" height="600"></canvas>
	<script type="text/javascript">
		var c = document.querySelector('canvas');
		var ctx = c.getContext("2d");

		//设置填充颜色和阴影
		ctx.fillStyle = "#0D6EB8";
		ctx.shadowColor = "gray";
		ctx.shadowOffsetX = 5;
		ctx.shadowOffsetY = 5;
		//阴影的模糊级别
		ctx.shadowBlur = 5;

		drawPathRect(ctx,100,100,300,200);
		//顺时针绘制矩形,rect方法默认是顺时针方向绘制
		ctx.rect(130,150,100,50);
		ctx.fill();

		ctx.beginPath();

		ctx.fillStyle = "";

		ctx.arc(185,350,50,0,Math.PI*2);
		ctx.arc(185,350,30,0,Math.PI*2,true);
		ctx.fill();

		ctx.beginPath();

		ctx.arc(340,350,50,0,Math.PI*2);
		ctx.arc(340,350,30,0,Math.PI*2,true);
		ctx.fill();

		//逆时针方向绘制矩形
		function drawPathRect(ctx,x,y,w,h){
			ctx.moveTo(x,y);
			ctx.lineTo(x,y+h);
			ctx.lineTo(x+w,y+h);
			ctx.lineTo(x+w,y);
			ctx.lineTo(x,y);
		}

	</script>
</body>
</html>

效果

示例2

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas 非零环绕练习</title>
</head>
<body>
	<canvas width="800" height="600"></canvas>
	<script type="text/javascript">
		var c = document.querySelector('canvas');
		var ctx = c.getContext("2d");

		drawPathRect(ctx,100,100,300,300);
		//绘制三角形
		ctx.moveTo(250,150);
		ctx.lineTo(350,250);
		ctx.lineTo(150,250);
		ctx.closePath();

		//绘制矩形
		ctx.moveTo(200,250);
		ctx.lineTo(300,250);
		ctx.lineTo(300,350);
		ctx.lineTo(200,350);
		ctx.closePath();

		//设置填充颜色和阴影
		ctx.fillStyle = "#0D6EB8";
		ctx.shadowColor = "gray";
		ctx.shadowOffsetX = 5;
		ctx.shadowOffsetY = 5;
		//阴影的模糊级别
		ctx.shadowBlur = 5;
		ctx.fill();

		//逆时针方向绘制矩形
		function drawPathRect(ctx,x,y,w,h){
			ctx.moveTo(x,y);
			ctx.lineTo(x,y+h);
			ctx.lineTo(x+w,y+h);
			ctx.lineTo(x+w,y);
			ctx.closePath();
		}
	</script>
</body>
</html>

效果