Question

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

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();

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

https://jsfiddle.net/dqfp8dwr/4/

Answer 1

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

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

正如我认为你提到的那样，这里有一个非零的绕组规则，并且从记忆中逆时针创建东西，因为它最初导致切口发生。更改顺时针创建的第二条路径可防止这种情况发生。

找到关于它的视频，它相当技术但可能有所帮助https://www.youtube.com/watch?v=YDtHBgBZyGI

带有子路径的HTML5 Canvas非零填充规则

1 个答案: