将两个或多个Canvas元素与某种混合组合在一起

Question

是否可以将2个单独的canvas元素的内容组合到一个canvas元素中？

像Photoshop中的"Flattening"两个或更多层一样......？

我可以想到一个方向,但我不太确定.我以.png的形式导出canvi(lol)的内容,然后让第三个canvas元素用某种混合算法(xor,blend,negative等)绘制两个图像.

Answer 1

当然你可以,而且你不需要任何有趣的库或任何东西,只需drawImage用画布作为图像调用.

这是一个将两个canvas元素组合到第三个上的示例:

http://jsfiddle.net/bnwpS/878/

当然,你可以只用两个(一个到另一个)来做,但三个是一个更好的例子.

globalCompositeOperation如果您想要XOR效果,可以随时更改.

Answer 2

如果你想要'普通'混合模式

• 确保您的canvas元素没有CSS中指定的背景.这将使他们透明.

• 绝对将所有canvas元素放在彼此的顶部.例如,将它们全部包装在一个<div class="canvas-layers">然后使用CSS,如:

   /* Set to the same width/height as the canvases */
  .canvas-layers { position:relative; width:400px; height:300px }
  .canvas-layers canvas { position:absolute; top:0; left:0 }
  

• 让浏览器自动执行半透明区域的混合.

如果您需要在单个画布上使用"正常"混合模式

• 如果你绝对必须将它们展平为单个画布(例如,你想从结果中创建数据uri),那么使用drawImage一个画布作为源"图像".例如,请参阅:https:
  //developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images#Using_other_canvas_elements

如果你想要简单的遮蔽,更轻或更暗

• 使用globalCompositeOperation画布上下文的属性,并使用drawImage一个画布作为源.请在此处查看示例:https:
  //developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

如果你想要Photoshop风格的混合模式

• 我创建了一个简单,轻量级的开源库,用于从一个HTML Canvas上下文到另一个上下文混合器执行Photoshop样式的混合模式:context-blender.以下是示例用法:

  // Might be an 'offscreen' canvas
  var over  = someCanvas.getContext('2d');
  var under = anotherCanvas.getContext('2d');
  
  over.blendOnto( under, 'screen', {destX:30,destY:15} );
  

  有关更多信息,请参阅自述文件.