Question

是否可以将2个单独的画布元素的内容组合成一个画布元素？

类似于Photoshop中两个或更多层的“展平”......？

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

Answer 1

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

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

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

当然你只需要两个（一个到另一个）就可以做到，但是有三个是更好的例子。

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

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上下文到另一个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} );
```
有关详细信息，请参阅README。

Answer 3

我认为您正在寻找类似pixastic库（Documentation）的内容。

Answer 4

你可以将css位置2（或更多）画布彼此叠加，让每个画布作为一个层。我不确定如何使用css完成此操作，但我已经做了类似的事情，不得不相互画布，一个用于2d内容，一个用于webgl，用户可以轻松地在它们之间切换

<div height="640" style="position: absolute;">
    <canvas width="640" style="position: absolute;visibility: hidden;" height="640" tabindex="1"></canvas>
    <canvas width="640" height="640" style="visibility: hidden;position: absolute;"></canvas>
</div>

我猜这段代码不是bullet proff也不正确，但它确实有效。希望这可以帮助。

如果不是，我会使用你提到的解决方法。（我实际上制作了一个类似的应用程序，我在屏幕画布上画了2d阴影并将其画在主画布上，透明，看起来非常整洁）

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

4 个答案:

如果您想要'正常'混合模式

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

如果您想要简单遮蔽，打火机或更暗

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