Question

我想知道为什么下面会产生一个白色区域，其中正方形相互重叠：

// 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搜索“缠绕”。

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

1 个答案: