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

Question

是否可以将 2 个单独的画布元素的内容合并到一个画布元素中？

类似于在 Photoshop 中“拼合”两层或更多层的东西……？

我可以想出一个办法，但我不太确定。我以 .png 的形式导出两个 canvi（笑）的内容，然后让第三个画布元素使用某种混合算法（异或、混合、负片等）绘制两个图像。

原文由 Abhishek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

这是一个示例，我将两个画布元素组合到第三个上：

 var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

ctx.fillStyle = 'rgba(255,0,0,.4)';
ctx.fillRect(20, 20, 20, 80);
ctx.fillStyle = 'rgba(205,255,23,.4)';
ctx.fillRect(30, 30, 40, 50);
ctx.fillStyle = 'rgba(5,255,0,.4)';
ctx.fillRect(40, 50, 80, 20);

var can2 = document.getElementById('canvas2');
var ctx2 = can2.getContext('2d');

ctx2.beginPath();
ctx2.fillStyle = "pink";
ctx2.arc(50, 50, 50, 0, Math.PI * 2, 1);
ctx2.fill();
ctx2.beginPath();
ctx2.clearRect(20, 40, 60, 20);

var can3 = document.getElementById('canvas3');
var ctx3 = can3.getContext('2d');

ctx3.drawImage(can, 0, 0);
ctx3.drawImage(can2, 0, 0);

 <canvas id="canvas1" width="200" height="200" style="border: 1px solid black"></canvas>
<canvas id="canvas2" width="200" height="200" style="border: 1px solid black"></canvas>
<canvas id="canvas3" width="200" height="200" style="border: 1px solid black"></canvas>

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

当然你可以只用两个（一个放在另一个上），但三个是一个更好的例子。

如果您想要 XOR 效果或其他效果，您可以随时更改 globalCompositeOperation 。

原文由 Simon Sarris 发布，翻译遵循 CC BY-SA 4.0 许可协议

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} );

有关详细信息，请参阅 自述文件。

原文由 Phrogz 发布，翻译遵循 CC BY-SA 3.0 许可协议