javascript - 反转 Canvas 上的路径

Question

看看下面的 svg。那里的路径几乎相同，但第二个路径是通过使用 evenodd 填充并向其内部的形状添加完整的矩形来反转的。

body {
  background: linear-gradient(to bottom, blue, red);
}

svg {
  height: 12em;
  border: 1px solid white;
}

svg + svg {
  margin-left: 3em;
}

<svg viewBox="0 0 10 10">
  <path d="
    M 1 1 L 2 3 L 3 2 Z
    M 9 9 L 8 7 L 7 8 Z
  " />
</svg>

<svg viewBox="0 0 10 10">
  <path fill-rule="evenodd" d="
    M 0 0 h 10 v 10 h -10 z
    M 1 1 L 2 3 L 3 2 Z
    M 9 9 L 8 7 L 7 8 Z
  " />
</svg>

现在我想在canvas上绘制相同的图片。第一张图片没有问题:

~function () {
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  
  var h = canvas.clientHeight, w = canvas.clientWidth;
  canvas.height = h;
  canvas.width = w;
  ctx.scale(h / 10, w / 10);
  
  ctx.beginPath();
  ctx.moveTo(1, 1);
  ctx.lineTo(2, 3);
  ctx.lineTo(3, 2);
  ctx.closePath();
  ctx.fill();

  ctx.beginPath();
  ctx.moveTo(9, 9);
  ctx.lineTo(8, 7);
  ctx.lineTo(7, 8);
  ctx.closePath();
  ctx.fill();
}()

body {
  background: linear-gradient(to bottom, blue, red);
}

canvas {
  height: 12em;
  border: 1px solid white;
}

<canvas height="10" width="10"></canvas>

但是如果我需要 Canvas 具有透明背景，如何绘制第二个？
每个路径片段仅由 L 行组成，从 M 开始，以 Z 结束。
片段不重叠。

Answer 1

创建图像反转的最佳方法是使用 globalCompositeOperation = "destination-out"在原始图像上绘制

填充规则的问题在于，很多时候用于创建形状的方法与其生成的图像的视觉表示不匹配。

下一个片段显示了这样的情况。只需穿过路径线即可快速渲染星星。 非零填充规则创建我们想要的形状。但是，如果我们尝试通过定义围绕它的路径来反转它，它就会失败，如果我们使用 Evenodd 规则，它也无法显示重叠区域。另外添加外部框会增加笔划和填充，使图像进一步复杂化，并且需要完成我们想要的工作量。

const ctx = canvas.getContext("2d");
const w = (canvas.width = innerWidth)*0.5;
const h = (canvas.height = innerHeight)*0.5;
// when there is a fresh context you dont need to call beginPath


// when defining a new path (after beginPath or a fresh ctx) you 
// dont need to use moveTo the path will start at the first point
// you define
for(var i = 0; i < 14; i ++){
  var ang = i * Math.PI * (10/14);
  var x = Math.cos(ang) * w * 0.7 + w; 
  var y = Math.sin(ang) * h * 0.7 + h; 
  ctx.lineTo(x,y);  
}
ctx.closePath();
ctx.lineWidth = 5;
ctx.lineJoin = "round";
ctx.stroke();
ctx.fillStyle = "red";
ctx.fill();
canvas.onclick = ()=>{
    ctx.rect(0,0,innerWidth,innerHeight);
    ctx.fillStyle = "blue";
    ctx.fill();
    info.textContent = "Result did not invert using nonzero fill rule";
    info1.textContent = "Click to see using evenodd fill";
    info1.className = info.className = "whiteText";
    canvas.onclick = ()=>{
       info.textContent = "Inverse image not the image wanted";
       info1.textContent = "Click to show strokes";
       info.className = info1.className = "blackText";
       ctx.fillStyle = "yellow";
       ctx.fill("evenodd");
        canvas.onclick = ()=>{
            info.textContent = "Strokes on boundary encroch on the image";
             info1.textContent = "See next snippet using composite operations";

            ctx.stroke();
            ctx.lineWidth = 10;
            ctx.lineJoin = "round";
            ctx.strokeStyle = "Green";
            ctx.stroke();

        }
    
    }
}

body {
  font-family : "arial";
}
.whiteText { color : white }
.blackText { color : black }
canvas {
  position : absolute;
  top : 0px;
  left : 0px;
  z-index : -10;
}

<canvas id=canvas></canvas>
<div id="info">The shape we want to invert</div>
<div id="info1">Click to show result of attempting to invert</div>

要绘制形状的反转，首先用不透明值填充所有像素(在本例中为黑色)。然后像平常一样定义形状。无需添加额外的路径点。

在调用填充或描边之前，将复合操作设置为“destination-out”，这意味着无论您渲染像素，都从目标中删除像素。然后像平常一样调用填充和描边函数即可。

完成后，您可以使用以下命令恢复默认的复合操作

ctx.globalCompositeOperation = "source-over";

请参阅下一个示例。

    const ctx = canvas.getContext("2d");
    const w = (canvas.width = innerWidth)*0.5;
    const h = (canvas.height = innerHeight)*0.5;
    // first create the mask
    ctx.fillRect(10,10,innerWidth-20,innerHeight-20);

    // then create the path for the shape we want inverted
    for(var i = 0; i < 14; i ++){
      var ang = i * Math.PI * (10/14);
      var x = Math.cos(ang) * w * 0.7 + w; 
      var y = Math.sin(ang) * h * 0.7 + h; 
      ctx.lineTo(x,y);  
    }
    ctx.closePath();
    ctx.lineWidth = 5;
    ctx.lineJoin = "round";
    // now remove pixels where the shape is defined
    // both for the stoke and the fill
    ctx.globalCompositeOperation = "destination-out";
    ctx.stroke();
    ctx.fillStyle = "red";
    ctx.fill();

    canvas {
      position : absolute;
      top : 0px;
      left : 0px;
      z-index : -10;
      background: linear-gradient(to bottom, #6CF, #3A6, #4FA);
    }

 
    <canvas id=canvas></canvas>