Canvas中的非零围绕规则原理

最新推荐文章于 2025-09-13 11:59:05 发布

转载最新推荐文章于 2025-09-13 11:59:05 发布 · 132 阅读

文章标签：

#javascript #ViewUI

本文详细解释了非零围绕规则的工作原理，并通过一个具体的环形图实例展示了如何使用这一规则来确定哪些区域应该被填充。通过理解线段与路径相交次数及方向对计数器的影响，可以准确地判断出哪些区域属于路径范围。

非零围绕规则：对于路径中指定范围区域，从该区域内部画一条足够长的线段。使此线段的全然落在路径范围之外。

非零围绕规则计数器：
然后，将计数器初始化为0，每当这个线段与路径上的直线或曲线相交时，就改变计数器的值，假设是与路径顺时针相交时。那么计数器就加1，假设是与路径逆时针相交时。那么计数器就减1.
假设计数器始终不为0，那么此区域就在路径范围里面，在调用fill()方法时，浏览器就会对其进行填充。假设终于值是0，那么此区域就不在路径范围内，浏览器就不会对其进行填充。

从上图中看
第一条线段：依据非零围绕规则，这条直线仅仅经过路径一次且路径是逆时针方向，那么计数器为-1;依据浏览器对计数器的计算原理得出，当调用fill()方法时浏览器会填充此区域。

第二条线段：依据非零围绕规则。这条直线经过路径二次且路径都是逆时针方向。那么计数器为-2;依据浏览器对计数器的计算原理得出，当调用fill()方法时浏览器会填充此区域。

第三条线段：依据非零围绕规则。这条直线经过路径二次;第一次经过的路径是逆时针方向，计数器则为-1; 第二次经过的路径是顺时针方向，计数器为1;原因计数器的终于值为0-1+1 = 0;所以依据浏览器对计数器的计算原理得出，当调用fill()方法时浏览器不会填充此区域。

依据上面的原理。演示画一个环形图的实例

例如以下图：

实例代码：

<style type="text/css">
canvas {
	border:1px solid #e5e5e5;
}
</style>
<canvas id="firstCanvas" width="400" height="400"> Canvas not supported </canvas>

<script type="text/javascript">
var canvas  = document.getElementById("firstCanvas"),
    context = canvas.getContext && canvas.getContext("2d");

context.fillStyle = "#ff6600";

// clear current subPath
context.beginPath();
// outer circle
context.arc(200, 200, 100, 0, Math.PI * 2, true);
// inner circle
context.arc(200, 200, 50,  0, Math.PI * 2, false);
context.fill(); 

</script>