在几个阶段中使用globalCompositeOperation

Question

我在我的背景下画了很多东西。形状，文字，图像..

我想使用实现相同的效果我在clip的上下文中使用globalCompositeOperation方法（使用clip对我来说更难以执行而且我不会'知道文本是否可能）

用户可以绘制几个形状。然后开始一个掩码阶段。绘制一些更多的形状，文本..它们将被绘制到蒙版中，然后下一个绘制将被剪切到蒙版阶段。然后继续定期绘图...

对于前。

用户绘制此图纸

然后开始屏蔽模式并绘制了这2条红线

然后他停止画入面具，并开始绘制矩形以考虑面具

最后应用了蒙版剪辑，结果应如下所示

如果没有先前的图纸，我已设法用线条剪切矩形。

// Starting the mask phase
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(240, 140);
ctx.moveTo(80, 20);
ctx.lineTo(300, 140);
ctx.stroke();

ctx.globalCompositeOperation = 'source-out';

ctx.fillStyle = 'cyan';
ctx.fillRect(50, 70, 250, 20);

// Setting the composition back
ctx.globalCompositeOperation = 'source-over';

但是当我在代码的开头添加我的绘图时，构图也会考虑它。

ctx.fillStyle = 'brown';
ctx.beginPath();
ctx.arc(80, 80, 50, 50, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = 'yellow';
ctx.fillRect(80, 60, 150, 40);
ctx.fillStyle = 'black';
ctx.font = '40pt arial';
ctx.fillText('Hello', 130, 110);


// How to tell the context to start from here the compisition ???

如果可能的话，如何告诉上下文从某一点开始创作？

我可以创建另一个画布并在那里绘制蒙版..然后在主画布上绘制新画布。但是有更好的解决方案吗？

Answer 1

您可以通过更改.globalCompositeOperation来更改绘图流程中任意点的合成模式。但是，正如您所发现的，任何新的合成模式也会影响现有的画布内容。

使用第二个“临时画布”进行合成不会破坏现有内容，你的直觉是正确的。

您可以使用内存中的画布进行合成并创建带有删除线的矩形。然后你可以将这个内存中的画布绘制到你的主画布上。由于合成是在内存中的画布上完成的，因此合成不会对您现有的circle-hello内容产生不利影响。

这是示例代码和演示：

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

// create an in-memory canvas to do compositing
var c=document.createElement('canvas');
var cctx=c.getContext('2d');

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/temp6a.png";
function start(){
  ctx.drawImage(img,0,0);
  addCompositedRectangle();
  ctx.drawImage(c,0,0);
}


function addCompositedRectangle(){

  // resize the in-memory canvas
  // Note: this automatically clears any previous content
  //       and also resets any previous compositing modes
  c.width=300; // largest width;
  c.height=140; // largest height;

  // Starting the mask phase
  cctx.strokeStyle = 'red';
  cctx.lineWidth = 5;
  cctx.beginPath();
  cctx.moveTo(20, 20);
  cctx.lineTo(240, 140);
  cctx.moveTo(80, 20);
  cctx.lineTo(300, 140);
  cctx.stroke();

  cctx.globalCompositeOperation = 'source-out';

  cctx.fillStyle = 'cyan';
  cctx.fillRect(50, 70, 250, 20);

  // Setting the composition back
  cctx.globalCompositeOperation = 'source-over';

}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

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