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

admin發表於2018-08-09
大家知道canvas種使用fill()方法可以填充路徑。

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

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

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

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

(1)."nonzero": 非零環繞規則, 預設的規則。

(2)."evenodd": 奇偶環繞規則。

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

1.png

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

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

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

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

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

相關文章