Canvas_绘制镂空的四边形

最新推荐文章于 2024-03-16 14:21:37 发布

lijianli_131300

最新推荐文章于 2024-03-16 14:21:37 发布

阅读量458

点赞数

分类专栏： Canvas

本文链接：https://blog.csdn.net/lijianli_131300/article/details/107505968

版权

Canvas 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Canvas绘制镂空的四边形</title>
</head>
<body>
	<canvas id="canvas" width="600" height="400"></canvas>
	<script>
		var myCanvas=document.getElementById("canvas");
		ctx=myCanvas.getContext("2d");
		ctx.beginPath(); //开启新路径，上边的画图与我无关
		ctx.moveTo(100,100);
		ctx.lineTo(200,100);
		ctx.lineTo(200,200);
		ctx.lineTo(100,200);
		ctx.closePath(); //自动闭合
		ctx.fillStyle="green";

		ctx.moveTo(125,125);
		ctx.lineTo(125,175);
		ctx.lineTo(175,175);
		ctx.lineTo(175,125);
		ctx.closePath(); //自动闭合
	
		ctx.fill();
	</script>
</body>
</html>

效果图如下：

上边两个四边形绘制，用到了非零环绕规则。

判断某一个区域是否填充，方法如下：

（1）从这个区域任意拉一条直线

（2）看和这条直线相交的轨迹

（3）如果是顺时针轨迹+1

（4）如果是逆时针轨迹 -1

（5）计算所有轨迹的和

（6）如果非0，则填充。

（7）如果是0，则不填充。

lijianli_131300

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Canvas_绘制镂空的四边形

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Canvas绘制镂空的四边形</title></head><body> <canvas id="canvas" width="600" height="400"></canvas> <script> var myCanva.
复制链接

扫一扫

专栏目录