非零与奇偶环绕规则
最新回答
沫小苼
2021-08-23 19:44:27
以以下canvas代码片段为例，探索非零环绕规则的执行过程。按照非零环绕规则的算法，渲染引擎如何确定哪些区域需要填充颜色？哪些区域则不需要？
考虑图中的五个点，分析它们是否位于需要填充的区域内。为每个点设置一个计数器，初始值为零。从各点引出足够长的射线，射线与圆弧路径的每次交叉都将圆弧路径划分为两部分。我们定义，穿过路径的一侧，计数器加一；从另一侧穿过，则计数器减一。最后，如果该点计数器的值不为零（即非零），则表示该点所在的区域需要填充颜色。
与非零环绕规则形成对比，奇偶环绕规则更易于理解。在上面的代码片段中，我虽然绘制了大小不一的两个圆弧，但它们的最后一个参数相同。奇偶环绕规则不会考虑路径的矢量方向。我们仍然选择五个点，向任意方向画射线，记录射线穿过路径的交叉点总数。如果结果为奇数，则表示需要填充颜色；反之，为偶数则不需要填充颜色。
同样的绘制步骤，仅仅改变context.fill()方法中参数的选择，最终的填充结果就会有所不同。这展示了非零环绕规则与奇偶环绕规则之间的矛盾，以及如何根据需求灵活选择适用的规则。
下面附上一段代码片段，以供参考和实践：
热门标签
