javascript - 填充内部多边形的外部区域

Question

我正在用 shipVertexes 数组中的 4 个点绘制一艘船。在飞船内部，我使用 stunVertexes 绘制了较小的相同形状。

抚摸上下文会产生附加图像。你可以看到大船里面有一艘小船。 (红船)

我想填充外船和内船之间的空间，在中间留下一个空白(黑色)空间。

当我运行 context.fill() 时，整个空间都被填满了(见 Yellow ship)。

如何只填充内部空间的外部？

Answer 1

除了使用 2 次填充操作和全局合成之外，还有一种更快的方法可以做到这一点。

另请注意，使用合成进行删除会删除船洞中的所有内容。如果背景中有一些装饰会丢失。在这种情况下，它看起来是正确的，因为您有一个显示正文标签颜色的空白背景。

填充操作有两种理解形状内部和外部的方法。最常用的是非零规则:

“非零”绕组

这个缠绕规则是最常用的，也是 Canvas 2D 唯一支持的规则。

要确定一个点是否落在曲线内，您可以通过该点绘制一条假想线。接下来，您将计算该线在到达该点之前与曲线相交的次数。每顺时针旋转减 1，每逆时针旋转加 1。

为了将非零风应用到你的船上，我将内部船的绘图顺序更改为逆时针方向，它会自动产生孔。

如果更改顺序过于复杂，您可以检查您的浏览器是否支持奇偶规则:

“奇偶”绕组

要确定一个点是否落在路径内，您再次通过该点画一条线。这一次，您只需添加穿过路径的次数。如果总数是偶数，则点在外面；如果是奇数，则点在里面。路径的弯曲被忽略。例如:

对于此规则，我只是复制了您的原始代码，并在填写时指定了“evenodd”；

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

ctx.fillStyle='red';
//ship copy 1
ctx.beginPath();
ctx.moveTo(50,0);
ctx.lineTo(100,25);
ctx.lineTo(50,150);
ctx.lineTo(0,25);
ctx.moveTo(50,10);
ctx.lineTo(20,25);
ctx.lineTo(50,100);
ctx.lineTo(80,25);
ctx.closePath();
ctx.fill();

//ship copy 2
ctx.beginPath();
ctx.translate(180, 0);
ctx.moveTo(50,0);
ctx.lineTo(100,25);
ctx.lineTo(50,150);
ctx.lineTo(0,25);
ctx.moveTo(50,10);
ctx.lineTo(80,25);
ctx.lineTo(50,100);
ctx.lineTo(20,25);
ctx.closePath();
ctx.fill('evenodd');

body{ background-color: black; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>