为什么在反转路径时填充会产生不同的结果？

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 中搜索“绕组”。