Html5 canvas 带有子路径的HTML5画布非零填充规则

我试图理解HTML5画布中一些路径绘制命令所产生的效果。默认情况下-如果没有为填充方法提供任何参数，则非零填充规则处于活动状态

ctx.beginPath();

ctx.moveTo(10,100);
ctx.lineTo(200,100);
ctx.lineTo(200,110);
ctx.lineTo(10,110);
ctx.lineTo(10,100);

ctx.moveTo(100,10);
ctx.lineTo(100,200);
ctx.lineTo(110,200);
ctx.lineTo(110, 10);
ctx.lineTo(100,10);
ctx.fillStyle="rgba(128,0,0,0.5)";
ctx.fill();

我正在绘制两个相互交叉的子路径（条），并使用fill命令填充整个路径。不应该用非零填充规则完全填充图形（中间没有间隙）。这里的误解在哪里

---

如果您将第二条路径更改为以下路径，这似乎会产生您想要的结果

ctx.moveTo(100,10);
ctx.lineTo(110, 10);
ctx.lineTo(110,200);
ctx.lineTo(100,200);
ctx.lineTo(100,10);

正如我想你提到的，这里有一个非零绕组的规则，从内存中创建的东西是逆时针的，就像你最初做的那样，它会导致断流发生。将第二条路径更改为顺时针创建可防止发生这种情况

找到这段视频，虽然技术性很强，但可能会有所帮助