从 html5 画布中删除剪辑区域

Question

我正在开发一个绘图应用程序，我会放置一些模板（形状遮罩），以便用户可以在上面以遮罩格式绘制。我可以添加模板（剪辑区域），但我无法删除它。我想知道如何从画布上删除这个剪辑区域，只留下用户所做的绘制。这是我用来添加模板的代码（区域剪辑）：

Obs：我想移除（活）它，只留下用户在其中绘制的画。

jsFiddle 链接：Link to app on Js Fiddle

document.getElementById("addstencil").addEventListener("click", addstencil_funcao);

function addstencil_funcao() {


// layer1/Path
  context.save();
  context.beginPath();
  context.moveTo(285.0, 279.0);
  context.lineTo(0.0, 279.0);
  context.lineTo(0.0, 0.0);
  context.lineTo(285.0, 0.0);
  context.lineTo(285.0, 279.0);
  context.globalAlpha=0.3; //Opacidade da empresa
  context.closePath();
  context.fill();

  // layer1/Path
  context.beginPath();
  context.moveTo(211.4, 242.2);
  context.lineTo(144.0, 206.8);
  context.lineTo(76.6, 242.2);
  context.lineTo(89.5, 167.2);
  context.lineTo(35.0, 114.0);
  context.lineTo(110.3, 103.1);
  context.lineTo(144.0, 34.8);
  context.lineTo(177.7, 103.1);
  context.lineTo(253.0, 114.0);
  context.lineTo(198.5, 167.2);
  context.lineTo(211.4, 242.2);
  context.closePath();
  context.fillStyle = "transparent";
  context.fill();
  context.restore();
  context.clip();



var canvasPic = new Image();
canvasPic.src = imagem_source;
context.drawImage(canvasPic, 0, 0);
}

Answer 1

只有将 .clip 包裹在 .save 和 .restore 中才会清除剪辑区域（或调整画布大小也会清除剪辑）。所以正确的顺序是：.save、.beginPath、很多路径命令（没有笔触/填充）、.clip、笔触/填充、.restore。

顺便说一句，fillStyle='transparent' 不会清除像素——它只是保持现有像素不变。您可以通过设置globalCompositeOperation = 'destination-out' 并填充所需的擦除路径来“擦除”像素。这是一个例子：

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// layer1/Path
context.beginPath();
context.moveTo(285.0, 279.0);
context.lineTo(0.0, 279.0);
context.lineTo(0.0, 0.0);
context.lineTo(285.0, 0.0);
context.lineTo(285.0, 279.0);
context.globalAlpha=0.3; //Opacidade da empresa
context.closePath();
context.fill();
context.globalAlpha=1.00;

// layer1/Path
context.beginPath();
context.moveTo(211.4, 242.2);
context.lineTo(144.0, 206.8);
context.lineTo(76.6, 242.2);
context.lineTo(89.5, 167.2);
context.lineTo(35.0, 114.0);
context.lineTo(110.3, 103.1);
context.lineTo(144.0, 34.8);
context.lineTo(177.7, 103.1);
context.lineTo(253.0, 114.0);
context.lineTo(198.5, 167.2);
context.lineTo(211.4, 242.2);
context.closePath();
context.globalCompositeOperation='destination-out';
context.fill();
context.globalCompositeOperation='source-over';

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