在画布上填充路径时，根据创建路径的方式，路径交叉点将使用填充颜色绘制或留空。
这是一个例子：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();
我希望两个交叉点以相同的方式绘制，因为组成它们的矩形大致相同，但是在第一个交叉点上，交叉点用填充颜色绘制，而在第二个交叉点上，交叉点是透明的。
为什么它在这两个十字路口表现不同？有没有办法避免“透明”的交叉行为？
简单的答案是：不要将第二个矩形的宽度设置为负值。如果您的线路是：
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 指定的填充计算都将单负值多边形视为路径之外。
HTML 5 画布填充的规范说：
fill() 方法必须使用 fillStyle 填充预期路径的所有子路径，并使用可选 w 参数指定的填充规则。如果未指定可选的 w 参数，或者它是字符串“nonzero”，则此方法必须使用非零缠绕规则填充所有子路径。如果可选的 w 参数是字符串“evenodd”，则此方法必须使用奇偶规则填充所有子路径。打开的子路径在填充时必须隐式关闭（不影响实际的子路径）。
请注意，确定内部内容的定义的“偶数”和“非零”均表示负编号的将在您的路径之外。
这是由您在第二个矩形上设置的 -50 宽度引起的。你只需要调整X：
ctx.rect(25, 150, 50, 50);
ctx.rect(50, 150, 50, 50);