非零圍繞規則：對於路徑中指定範圍區域，從該區域內部畫一條足夠長的線段。使此線段的全然落在路徑範圍之外。
非零圍繞規則計數器：
然後，將計數器初始化為0，每當這個線段與路徑上的直線或曲線相交時，就改變計數器的值，假設是與路徑順時針相交時。那麼計數器就加1， 假設是與路徑逆時針相交時。那麼計數器就減1.
假設計數器始終不為0，那麼此區域就在路徑範圍裡面，在呼叫fill()方法時，瀏覽器就會對其進行填充。假設終於值是0，那麼此區域就不在路徑範圍內，瀏覽器就不會對其進行填充。
從上圖中看
第一條線段：依據非零圍繞規則，這條直線僅僅經過路徑一次且路徑是逆時針方向，那麼計數器為-1;依據瀏覽器對計數器的計算原理得出，當呼叫fill()方法時瀏覽器會填充此區域。
第二條線段：依據非零圍繞規則。這條直線經過路徑二次且路徑都是逆時針方向。那麼計數器為-2;依據瀏覽器對計數器的計算原理得出，當呼叫fill()方法時瀏覽器會填充此區域。
第三條線段：依據非零圍繞規則。這條直線經過路徑二次;第一次經過的路徑是逆時針方向，計數器則為-1; 第二次經過的路徑是順時針方向，計數器為1;原因計數器的終於值為0-1+1 = 0;所以依據瀏覽器對計數器的計算原理得出，當呼叫fill()方法時瀏覽器不會填充此區域。
依據上面的原理。演示畫乙個環形圖的例項
例如以下圖：
例項**：
canvas not supportedCanvas中的非零環繞
先上圖 當要填充圖形時，必須區分開哪些部分是覆蓋的，哪些是空的，根據繪製的方向可以判斷出來 非零環繞規則 對於路徑中指定範圍區域，從該區域內部畫一條足夠長的線段，使此線段的完全落在路徑範圍之外。非零環繞規則計數器 然後，將計數器初始化為0，每當這個線段與路徑上的直線或曲線相交時，就改變計數器的值，如...
Canvas中的非零環繞規則原理
非零環繞規則 對於路徑中指定範圍區域，從該區域內部畫一條足夠長的線段，使此線段的完全落在路徑範圍之外。非零環繞規則計數器 然後，將計數器初始化為0，每當這個線段與路徑上的直線或曲線相交時，就改變計數器的值，如果是與路徑順時針相交時，那麼計數器就加1，如果是與路徑逆時針相交時，那麼計數器就減1.如果計...
從零開始的canvas
最近工作都是增刪改查。正好you有時間學點新東西，er而不是單純的業務上的東西 所以就學學canvas吧 sho首選建立乙個canvas var c document.getelementbyid mycanvas var ctx c.getcontext 2d 然後進行定義 ctx.beginpa...