先上圖
當要填充圖形時，必須區分開哪些部分是覆蓋的，哪些是空的，根據繪製的方向可以判斷出來
非零環繞規則：對於路徑中指定範圍區域，從該區域內部畫一條足夠長的線段，使此線段的完全落在路徑範圍之外。
非零環繞規則計數器：
然後，將計數器初始化為0，每當這個線段與路徑上的直線或曲線相交時，就改變計數器的值，如果是與路徑順時針相交時，那麼計數器就加1， 如果是與路徑逆時針相交時，那麼計數器就減1.
如果計數器始終不為0，那麼此區域就在路徑範圍裡面，在呼叫fill()方法時，瀏覽器就會對其進行填充。如果最終值是0，那麼此區域就不在路徑範圍內，瀏覽器就不會對其進行填充。
如圖線段1：根據非零環繞規則，這條直線只經過路徑一次且路徑是逆時針方向，那麼計數器為-1;
根據瀏覽器對計數器的計算原理得出，當呼叫fill()方法時瀏覽器會填充此區域。
線段2：根據非零環繞規則，這條直線經過路徑二次且路徑都是逆時針方向，那麼計數器為-2;
根據瀏覽器對計數器的計算原理得出，當呼叫fill()方法時瀏覽器會填充此區域。
線段3：根據非零環繞規則，這條直線經過路徑二次;第一次經過的路徑是逆時針方向，計數器則為-1;
第二次經過的路徑是順時針方向，計數器為1;原因計數器的最終值為0-1+1 = 0;
所以根據瀏覽器對計數器的計算原理得出，當呼叫fill()方法時瀏覽器不會填充此區域。
Canvas中的非零環繞規則原理
非零環繞規則 對於路徑中指定範圍區域，從該區域內部畫一條足夠長的線段，使此線段的完全落在路徑範圍之外。非零環繞規則計數器 然後，將計數器初始化為0，每當這個線段與路徑上的直線或曲線相交時，就改變計數器的值，如果是與路徑順時針相交時，那麼計數器就加1，如果是與路徑逆時針相交時，那麼計數器就減1.如果計...
非零環繞規則
canvas填充的非零環繞規則 從區域內往外畫一條足夠長的線，線與順時針路徑相交，計數器 1，與逆時針路徑相交，計數器 1，計數器最終不為0則填充 水平方向上 margin left padding left border left width border right padding right ...
Canvas中的非零圍繞規則原理
非零圍繞規則 對於路徑中指定範圍區域，從該區域內部畫一條足夠長的線段。使此線段的全然落在路徑範圍之外。非零圍繞規則計數器 然後，將計數器初始化為0，每當這個線段與路徑上的直線或曲線相交時，就改變計數器的值，假設是與路徑順時針相交時。那麼計數器就加1，假設是與路徑逆時針相交時。那麼計數器就減1.假設計...