當畫布路徑以某種方式相交時，它不會被繪製

Question

當在畫布上填充路徑時，根據創建路徑的方式，路徑交叉點將用填充顏色繪製或保留爲空白。

下面是一個例子：
http://jsfiddle.net/C3Hbb/

//Works as expected: 
ctx.beginPath(); 

ctx.rect(50, 50, 50, 50); 
ctx.rect(25, 50, 50, 50); 

ctx.fill(); 

//Transparent on intersection: 
ctx.beginPath(); 

ctx.rect(25, 150, 50, 50); 
ctx.rect(100, 150, -50, 50); 

ctx.fill(); 

我預期既交點要繪製的同樣的方式，因爲這構成它們的矩形大致相當，但在第一個，交點繪有填充顏​​色，第二個交點是透明的。

爲什麼它在這兩個交叉點上表現不同？有沒有辦法避免「透明」的交叉行爲？

Answer 1

簡單的答案是：不要將第二個矩形的寬度設置爲負數。如果您的線路是：

ctx.rect(25, 150, 50, 50); 
ctx.rect(50, 150, 50, 50); 

或：

ctx.rect(25, 150, 50, 50); 
ctx.rect(100, 200, -50, -50); 

它會一直畫就好了。實際上，單個負面尺寸會告訴它逆時針繪製點而不是順時針繪製標準點。由HTML5 canvas.draw指定的填充計算將單負值多邊形視爲您的路徑之外。

的spec對HTML 5畫布填充說：

填充（）方法必須使用填充填充樣式，以及使用由可選瓦特參數指定的填充規則的預期路徑的子路徑的所有。如果沒有指定可選的w參數，或者如果它是字符串「非零」，則此方法必須使用non-zero winding rule填充所有子路徑。如果可選的w參數是字符串「evenodd」，則此方法必須使用even-odd rule填充所有子路徑。打開的子路徑在填充時必須隱式關閉（不影響實際的子路徑）。

請注意，既定義的「evenodd」和「nonzero」意味着確定內部是什麼，表示負數的數字將在您的路徑之外。

Answer 2

這是由您在第二個矩形上設置的-50寬度引起的。您只需要調整X：

ctx.rect(25, 150, 50, 50); 
ctx.rect(50, 150, 50, 50);