Canvas中的非零環繞規則原理

非零環繞規則：對於路徑中指定範圍區域，從該區域內部畫一條足夠長的線段，使此線段的完全落在路徑範圍之外。

非零環繞規則計數器：

然後，將計數器初始化為0，每當這個線段與路徑上的直線或曲線相交時，就改變計數器的值，如果是與路徑順時針相交時，那麼計數器就加1， 如果是與路徑逆時針相交時，那麼計數器就減1.

如果計數器始終不為0，那麼此區域就在路徑範圍裡面，在呼叫fill()方法時，瀏覽器就會對其進行填充。如果最終值是0，那麼此區域就不在路徑範圍內，瀏覽器就不會對其進行填充。

從上圖中看

第一條線段：根據非零環繞規則，這條直線只經過路徑一次且路徑是逆時針方向，那麼計數器為-1;根據瀏覽器對計數器的計算原理得出，當呼叫fill()方法時瀏覽器會填充此區域。

第二條線段：根據非零環繞規則，這條直線經過路徑二次且路徑都是逆時針方向，那麼計數器為-2;根據瀏覽器對計數器的計算原理得出，當呼叫fill()方法時瀏覽器會填充此區域。

第三條線段：根據非零環繞規則，這條直線經過路徑二次;第一次經過的路徑是逆時針方向，計數器則為-1; 第二次經過的路徑是順時針方向，計數器為1;原因計數器的最終值為0-1+1 = 0;所以根據瀏覽器對計數器的計算原理得出，當呼叫fill()方法時瀏覽器不會填充此區域。

根據上面的原理，演示畫乙個環形圖的例項

如下圖：

例項**：

canvas not supported

Canvas中的非零環繞

先上圖 當要填充圖形時，必須區分開哪些部分是覆蓋的，哪些是空的，根據繪製的方向可以判斷出來 非零環繞規則 對於路徑中指定範圍區域，從該區域內部畫一條足夠長的線段，使此線段的完全落在路徑範圍之外。非零環繞規則計數器 然後，將計數器初始化為0，每當這個線段與路徑上的直線或曲線相交時，就改變計數器的值，如...

Canvas中的非零圍繞規則原理

非零圍繞規則 對於路徑中指定範圍區域，從該區域內部畫一條足夠長的線段。使此線段的全然落在路徑範圍之外。非零圍繞規則計數器 然後，將計數器初始化為0，每當這個線段與路徑上的直線或曲線相交時，就改變計數器的值，假設是與路徑順時針相交時。那麼計數器就加1，假設是與路徑逆時針相交時。那麼計數器就減1.假設計...

非零環繞規則

canvas填充的非零環繞規則 從區域內往外畫一條足夠長的線，線與順時針路徑相交，計數器 1，與逆時針路徑相交，計數器 1，計數器最終不為0則填充 水平方向上 margin left padding left border left width border right padding right ...