canvas非零繞組規則與奇偶規則

大家知道canvas種使用fill()方法可以填充路徑。

其實這個填充也是有規則的，具體語法結構如下:

[JavaScript] 純文字檢視 複製程式碼
ctx.fill();
ctx.fill(fillRule);
ctx.fill(path, fillRule);

關於path引數這裡我們們先不介紹，具體可以參閱canvas Path2D物件一章節。

fillRule引數就是用來規定填充規則的，可被允許的值如下:

（1）."nonzero": 非零環繞規則， 預設的規則。

（2）."evenodd": 奇偶環繞規則。

下面就對這個規則做一下介紹:

假設從內部做一條指向無窮遠的射線（當然這個線會穿透所有的曲線）。

下面就分別針對兩個規則作介紹:

（1）.對於奇偶規則:曲線和射線有兩個交點（或交點個數為偶數），按照奇偶規則，此點在路徑之外，那麼呼叫fill()方法時不會填充，反之就會進行填充。

（2）.對於非零規則:將計數器初始化為0，每當這個線段與路徑上的直線或曲線相交時，就改變計數器的值，如果是與路徑順時針相交時，那麼計數器就加1， 如果是與路徑逆時針相交時，那麼計數器就減1，如果計數器始終不為0，那麼此區域就在路徑範圍裡面，在呼叫fill()方法時，就會對其進行填充。如果最終值是0，那麼此區域就不在路徑範圍內，不會對其進行填充。

掌握了上面的理論，那麼對canvas繪製立體圓環程式碼例項一章節中，為什麼只填充一個圓環就可以理解了。