在 Canvas 绘图中，非零环绕规则（non-zero winding rule 或 non-zero rule）是用于确定一个点是否位于路径内部的算法。它主要用于fill()方法，决定哪些区域需要填充颜色。
非零环绕规则的工作原理如下：
-
从需要判断的点出发，向任意方向画一条射线。 这条射线不应该穿过任何路径的顶点。
-
为路径的每一段线段指定一个方向值（winding number）。 如果线段从射线的左侧穿过到右侧，则 winding number 加 1；如果线段从射线的右侧穿过到左侧，则 winding number 减 1。
-
将所有穿过射线的线段的 winding number 相加。
-
如果 winding number 的总和不为零，则该点位于路径内部，会被填充；如果 winding number 的总和为零，则该点位于路径外部，不会被填充。
举例说明：
想象一下一个五角星。如果应用非零环绕规则，星星的中心点会被填充，因为围绕中心点的路径的 winding number 总和不为零。即使中心点不在任何一个三角形的内部，它仍然被认为在整个路径的内部。
再想象一个有两个同心圆的图形，外圆顺时针绘制，内圆逆时针绘制。如果应用非零环绕规则，两个圆之间的区域会被填充。这是因为从该区域内的任何一点引出的射线都会穿过外圆（+1）和内圆（+1），winding number 总和为 2，不为零。而内圆内部的区域不会被填充，因为射线会穿过外圆（+1）和内圆（-1），winding number 总和为 0。
与 even-odd 规则的区别：
Canvas 还支持另一种规则，称为 even-odd 规则 (奇偶规则)。even-odd 规则只计算射线穿过路径的次数，不考虑方向。如果穿过次数为奇数，则该点位于路径内部；如果穿过次数为偶数，则该点位于路径外部。
在 Canvas API 中的使用：
默认情况下，Canvas 使用非零环绕规则。你可以使用 ctx.fill() 方法进行填充。 如果你想使用 even-odd 规则，可以使用 ctx.fill('evenodd')。
总而言之，非零环绕规则提供了一种更灵活的方式来定义复杂的填充区域，特别是在处理自相交路径时。理解非零环绕规则对于创建复杂的 Canvas 图形至关重要。
