在SVG和Canvas中，nonzero（非零）规则和evenodd（奇偶）规则是两种常见的填充规则。它们用于确定如何绘制图形的内部区域。
- 非零规则（Nonzero Rule）： 非零规则是默认的填充规则，在SVG和Canvas中广泛使用。根据该规则，对路径进行顺时针或逆时针方向的计数，每当遇到路径的边界（线段或曲线），计数器就相应地增加或减少。
- 如果路径边界是从左到右穿过，则计数器增加1。
- 如果路径边界是从右到左穿过，则计数器减少1。
根据非零规则，如果路径计数器的最终值为0，则点被视为在路径外部，不进行填充；而如果计数器的最终值不为0，则点被视为在路径内部，进行填充。
下面是一个示例来说明非零规则的工作原理：
<svg>
<path d="M100 100 L200 200 L300 100 Z"/>
</svg>
这个路径描述了一个三角形，按顺时针方向绘制。根据非零规则，路径的边界沿着三角形的周长移动时，计数器会增加或减少。当计数器回到起始点时，最终值为0，表示路径的内部为空，不进行填充。
- 奇偶规则（Even-Odd Rule）： 奇偶规则是另一种常见的填充规则，它与非零规则有所不同。根据奇偶规则，将路径中的点投射到无限远处，然后按照路径穿越的次数来计数。如果计数是奇数，表示点在路径内部；如果计数是偶数，表示点在路径外部。
下面是一个示例来说明奇偶规则的工作原理：
<svg>
<path fill-rule="evenodd" d="M100 100 L200 200 L300 100 Z"/>
</svg>
这个路径描述了一个与前面相同的三角形，但这次使用了fill-rule属性设置为"evenodd"来指定奇偶规则。根据奇偶规则，路径沿着三角形的周长移动时，计数器会根据路径穿越的次数增加或减少。当计数为奇数时，表示路径内部；当计数为偶数时，表示路径外部。因此，根据上述路径的定义，整个三角形都被视为内部区域，进行填充。
总结：
- 非零规则（Nonzero Rule）：根据路径边界顺时针或逆时针方向的计数，最终值为0表示路径外部，不进行填充；最终值不为0表示路径内部，进行填充。
- 奇偶规则（Even-Odd Rule）：根据路径穿越次数的奇偶性来计算，奇数表示路径内部，偶数表示路径外部。
可以通过在SVG中使用fill-rule属性来设置填充规则，如示例所示。Canvas中没有直接提供设置填充规则的API，但可以通过其他手段模拟实现。
理解这两种填充规则对于正确渲染和控制图形的内部区域非常重要，尤其是在处理复杂的路径和组合形状时。
