我想知道为什么下面会产生一个正方形相互重叠的白色字段：
// 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/。然而，显然重叠的空间变成了白色（一般来说，背景颜色）。
如果我反过来定义一条路径，它基本上就是它要切断的同一区域，那么为什么在填充时会产生不同的结果呢？