javascript - HTML/JS 形状减法

Question

在 HTML5/JS 中有没有办法创建一个复合形状，例如，从一个封闭的矩形中减去一个多边形？目的是对复合形状进行不透明填充，但多边形内部是透明的。

Answer 1

当然，您甚至可以使用 fill-rule 来完成此操作而无需合成。

Canvas 支持两种填充规则，默认 non-zero winding以及 even-odd规则(有关详细信息，请参阅链接)。

通过使用后者，在内部扫描每条线并计算交叉点的数量。然后填充奇数和偶数边界之间的线段，在这种情况下，这允许我们将一个多边形封装在另一个多边形中，并且只填充它们之间的空间。

使用填充规则的示例代码

var ctx = c.getContext("2d");

// enclosing rectangle
ctx.rect(10, 10, 280, 130);

// some interior shape inside
ctx.rotate(0.2);
ctx.rect(60, 20, 200, 50);

ctx.fill("evenodd");

body {background:#ddd}

<canvas id=c></canvas>

当然，合成也是可能的，但这需要一张“白纸”开始，因为它取决于 alpha channel 。

使用“source-over”合成模式以正常方式绘制第一个形状。然后切换到“destination-out”，这将根据新绘图中的像素删除任何现有的非透明像素。在这种情况下，它将使用新形状在以前的形状上打洞。

使用合成的示例代码

var ctx = c.getContext("2d");

// enclosing rectangle
ctx.fillRect(10, 10, 280, 130);

// some interior shape inside
ctx.rotate(0.2);
ctx.globalCompositeOperation = "destination-out";  // will "punch-out" background
ctx.fillRect(60, 20, 200, 50);

body {background:#ddd}

<canvas id=c></canvas>