从 html5 canvas 移除剪辑区域

Question

我正在开发一个绘图应用程序，我会放置一些模板（形状蒙版），以便用户可以在上方以蒙版格式绘制。我可以添加模板（剪裁区域），但我不能删除它。我想知道如何从 canvas 中删除这个剪裁区域并只保留用户绘制的内容。这是我用来添加模板（区域裁剪）的代码：

Obs：我想删除（启用）它并只保留用户在其中制作的绘图。

Link 到 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 中才能清除剪辑区域（或调整 canvas 的大小也会清除剪辑）。所以正确的顺序是：.save、.beginPath、许多路径命令（没有 strokes/fills）、.clip、stroke/fill、.restore。

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

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>

从 html5 canvas 移除剪辑区域

Remove clipping region from html5 canvas

html

canvas

draw

html5-canvas