在画布上反转路径

Question

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

＆＃13;

＆＃13;

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

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但如果我需要画布具有透明背景，我怎么画第二个？
每个路径片段仅由行L组成，从M开始，以Z结束。
碎片不会重叠。

Answer 1

ctx.fill(fillrule)也接受"evenodd" fillrule参数，但在这种情况下甚至不需要它，因为三角形与矩形完全重叠。

~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(); // start our Path declaration

  ctx.moveTo(1, 1);
  ctx.lineTo(2, 3);
  ctx.lineTo(3, 2);
  // Actually closePath is generally only needed for stroke()
  ctx.closePath(); // lineTo(1,1)

  ctx.moveTo(9, 9);
  ctx.lineTo(8, 7);
  ctx.lineTo(7, 8);
  ctx.closePath(); // lineTo(9,9)
  ctx.rect(0,0,10,10) // the rectangle  
  
  ctx.fill();
  
}()

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

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

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

如果你的三角形与路径的另一段（这里是弧形）重叠，那将是有用的：

var canvas = document.querySelectorAll('canvas');
  var h = canvas[0].clientHeight, w = canvas[0].clientWidth;
  drawShape(canvas[0].getContext('2d'), 'nonzero');
  drawShape(canvas[1].getContext('2d'), 'evenodd');
  
function drawShape(ctx, fillrule) {
  ctx.canvas.height = h;
  ctx.canvas.width = w;

  ctx.scale(h / 10, w / 10);
  
  ctx.beginPath(); // start our Path declaration

  ctx.moveTo(1, 1);
  ctx.lineTo(2, 3);
  ctx.lineTo(3, 2);
  // here closePath is useful
  ctx.closePath(); // lineTo(1,1)

  ctx.arc(5,5,5,0,Math.PI*2)

  ctx.moveTo(9, 9);
  ctx.lineTo(8, 7);
  ctx.lineTo(7, 8);
  ctx.closePath(); // lineTo(9,9)
  ctx.rect(0,0,10,10) // the rectangle  
  
  ctx.fill(fillrule);
  ctx.fillStyle = 'white';
  ctx.setTransform(1,0,0,1,0,0);
  ctx.fillText(fillrule, 5, 12)
}

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

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

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

Answer 2

创建图像反转的最佳方法是使用globalCompositeOperation = "destination-out"

绘制原始图像

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

下一个片段显示了这种情况。通过穿越路径线快速渲染星形。 nonzero填充规则会创建我们想要的形状。但是如果我们试图通过定义它周围的路径来反转它，它就会失败，如果我们使用evenodd规则它也无法显示重叠区域。此外，添加外部框会增加笔划以及填充，从而进一步使图像和获得我们想要的工作量变得复杂。

＆＃13;

＆＃13;

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

        }
    
    }
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

在调用fill或stroke之前，将复合操作设置为＆＃34; destination-out＆＃34;这意味着在渲染像素的任何位置从目标中删除像素。然后正常调用填充和描边功能。

完成后，使用

恢复默认复合操作

ctx.globalCompositeOperation = "source-over";

见下一个例子。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

 
    <canvas id=canvas></canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 3

苏维埃：

• 仅使用一对beginPath和fill。
• 将closePath替换为手动lineTo到对应点。

它会给你倒像：

＆＃13;

＆＃13;

~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(); // begin it once

  ctx.moveTo(0, 0); // Add full rectangle
  ctx.lineTo(10, 0);
  ctx.lineTo(10, 10);
  ctx.lineTo(0, 10);

  ctx.moveTo(1, 1);
  ctx.lineTo(2, 3);
  ctx.lineTo(3, 2);
  ctx.lineTo(1, 1); // not ctx.closePath();

  ctx.moveTo(9, 9);
  ctx.lineTo(8, 7);
  ctx.lineTo(7, 8);
  ctx.lineTo(9, 9);

  ctx.fill(); // And fill in the end
}()

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;