Canvas的fill方法之“非零环绕原则nonzero”与“奇偶原则evenodd”

我们一般使用Canvas的fill方法时，是直接进行填充路径。
CanvasRenderingContext2D.fill()
其实fill方法有两个参数可选：nonzero | evenodd ，“nonzero”是非零环绕原则，也是默认值，“evenodd”为奇偶原则。

1 非零环绕原则nonzero

1.1 使用规则

是用来判断哪些区域属于路径内( 计算结果非0，即为路径内 )。
* 在路径包围的区域中，随便找一点，向外发射一条射线，
* 和所有围绕它的边相交，
* 然后开启一个计数器，从0计数，
* 如果这个射线遇到顺时针围绕，那么+1，
* 如果遇到逆时针围绕，那么-1，
* 如果最终值非0，则这块区域在路径内。

1.2 举个栗子

如何实现下面图片的效果？
实现起来非常容易，保证外层正方形是顺时针，内层正方形逆时针，或者外层正方形是逆时针，内层正方形顺时针即可。

下载 (2).png

2 奇偶原则evenodd

2.1 使用规则

    * 在路径包围的区域中，随便找一点，向外发射一条射线，
    * 和所有围绕它的边相交，
    * 查看相交线的个数，如果为奇数，就填充，如果是偶数，就不填充。

1.2 举个栗子

绘制一个正五角星，5个角填充颜色，中间部分不填充