爲什麼在倒退路徑時灌裝產量會有不同的結果？

Question

我想知道爲什麼以下產生白色字段，其中正方形彼此重疊：

http://jsfiddle.net/yNTTj/5/

// square 1 
ctx.moveTo( 0, 0); // left top 
ctx.lineTo(200, 0); // right top 
ctx.lineTo(200, 200); // right bottom 
ctx.lineTo( 0, 200); // left bottom 
ctx.lineTo( 0, 0); // left top 

// square 2 
ctx.moveTo(100, 100); // left top 
ctx.lineTo(100, 300); // left bottom 
ctx.lineTo(300, 300); // right bottom 
ctx.lineTo(300, 100); // right top 
ctx.lineTo(100, 100); // left top 

ctx.fill(); 

因此，當第一方畫有一個路徑定義順時針，第二方被吸入具有逆時針定義的路徑。

我希望既能顏色黑色，就像如果我們定義廣場2相同的方式的順序會發生什麼：http://jsfiddle.net/yNTTj/6/。然而，顯而易見的是，重疊的空間變成白色（一般來說，背景顏色）。

如果我反過來定義一條路徑，它基本上與它切斷的區域相同，那麼爲什麼它在填充時會產生不同的結果？

Answer 1

這種類型的填充行爲被稱爲「非零纏繞規則」。 Wikipedia has a page on it.

該規範定義該行爲。搜索this page of the specification「纏繞」。