这篇博客介绍了HTML5 Canvas中非零环绕规则的概念，该规则用于确定如何填充互相交叉的路径。通过beginPath()开始新路径，并利用fill()方法，canvas根据非零环绕规则判断路径填充。文章通过一个圆环效果的示例，解释了路径计数方法，逆时针路径减1，顺时针路径加1，计数为0则不填充。并提供了实现圆环效果的代码片段。
学习 《HTML5 Canvas 核心技术图形、动画与游戏开发》笔记 二：
“非零环绕规则” 实现如下圆环效果：
canvas 中可通过 beginPath() 来开始一段新的路径，如果当前路径是循环的，或者包含多个相交的子路径时，当fill()方法被调用时，canvas 绘图环境变量就会判断，应该如何对当前路径进行填充。canvas在填充那种互相有交叉的路径时，使用"非零环绕规则"。
非零环绕原理：
如图1所示：假如有两条子路径，里面的路径是逆时针，外面一条是顺时针。当计算里面一条区域时，按照箭头方直到没有子路径为止向往外计数，遇到顺时针则加 1，遇到逆时针则减 1。若计数最终值不是 0，那么此区域，在调用fill()方法时，浏览器会对其进行填充。如果是 0，那么此区域相当于不在路径中，浏览器不会对其进行填充。最终填充效果如图2所示。
图
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
