nonzero

nonzero意为非0值。也即，将通过一定的方法来计算出一个数值，如果该数值不等于0，则该区域被认定为内部区域而应填充；如果该数值等于0，则该区域被认定为外部区域而不予填充。

HTML 5规范有下列定义：

The value "nonzero" value indicates the nonzero winding rule, wherein a point is considered to be outside a shape if the number of times a half-infinite straight line drawn from that point crosses the shape's path going in one direction is equal to the number of times it crosses the path going in the other direction.

一句话概括，即任意一个点所引出的射线与图形不同方向的边的相交次数是否相等。如果相等，则属外部区域；如果不等，则属内部区域。

具体来说：

1. 取任意一个点
2. 从该点引出任意一条射线
3. 检查其与图形不同方向的路径相交的情况
4. 如果该射线与不同方向绘制的路径相交的次数相等，则该点属于图形路径的外部区域；如果不等，则该点为图形的内部区域。

看下面图例：

三角形是按逆时针方向来绘制的。任取两点，分别为绿点与红点。

其中，绿点所在射线与图形的边只相交1次，无与相反方向的边相交，因此，绿点位于图形内部区域。

红点所在射线先与底边相交1次，该边的方向是从左到右，再与左斜边相交1次，该边的方向从右到左，方向相反，因此，两种情况的相交的次数正好相等，因此，红点位于图形外部区域。

为何取名为nonzero？在计算相交次数时，凡遇与某一方向的边相交一次，则计数加1；凡遇与相反方向的边相交一次，则计数减1。结果如果不为0，则应填充。计数方式不同而已。

再看之前被挖掉的圆洞的情况。

arc的最后一个参数是counterclockwise，即是否按逆时针方向绘制，默认值为false。因此，默认情况下，或当我们显式地将其值设置为false时，则按顺时针方向绘制圆。当该参数为true时，则按逆时针方向绘制圆。因此，上面的圆是按顺时针来绘制的。

此时，绿点所在射线先与圆弧相交，相交时圆弧的方向是从上到下，再与三角形的右边相交，相交时该边的方向是从下到上。两者方向相反。因此，绿点射线与不同方向的边所相交的次数相等，故绿点所在的位置被认定为图形的外部区域而不予填充。

红点所在射线与圆弧两次相交时，圆弧方向相反，计数为0；再与三角形左边相交，计数为1。结果不为0，因此被认定为图形内部区域而被填充。

根据此规则，我们很容易绘制出被圆环的效果：

evenodd

HTML 5规范定义：

The "evenodd" value indicates the even-odd rule, wherein a point is considered to be outside a shape if the number of times a half-infinite straight line drawn from that point crosses the shape's path is even.

evenodd的填充方式更容易理解了，它不管相交时图形的边的方向，只计射线与边相交的次数。如果相交的次数为奇数，则认为位于图形内部区域；如果相交的次数为偶数，则认为位于图形外部区域。

虽然红点位于整个图形的总体边框范围内，但从红点引出的任意射线与边相交的次数为偶数，故红点位于图形外部区域。