学习 《HTML5 Canvas 核心技术图形、动画与游戏开发》笔记 二:
“非零环绕规则” 实现如下圆环效果:
canvas 中可通过 beginPath() 来开始一段新的路径,如果当前路径是循环的,或者包含多个相交的子路径时,当fill()方法被调用时,canvas 绘图环境变量就会判断,应该如何对当前路径进行填充。canvas在填充那种互相有交叉的路径时,使用"非零环绕规则"。
非零环绕原理:
如图1所示:假如有两条子路径,里面的路径是逆时针,外面一条是顺时针。当计算里面一条区域时,按照箭头方直到没有子路径为止向往外计数,遇到顺时针则加 1,遇到逆时针则减 1。若计数最终值不是 0,那么此区域,在调用fill()方法时,浏览器会对其进行填充。如果是 0,那么此区域相当于不在路径中,浏览器不会对其进行填充。最终填充效果如图2所示。
图