Question

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

Obs：我想删除（实时）它，只留下用户在其中绘制的绘图。

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

Only wrapping the .clip in .save and .restore will clear a clipping region (or resizing the canvas also clear a clip). So the proper order is: .save, .beginPath, lots of path commands (no strokes/fills), .clip, stroke/fill, .restore.

BTW, fillStyle='transparent' will not clear pixels -- it simply leaves existing pixels unchanged. You can "erase" pixels by setting globalCompositeOperation = 'destination-out' and filling the desired erasure path. Here's an example:

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画布中删除剪裁区域

1 个答案: