将两个或多个Canvas元素与某种混合相结合 [英] Combining two or more Canvas elements with some sort of blending

问题描述

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

Is it possible to combine the contents of 2 separate canvas elements into a single canvas element?

类似于在Photoshop中平铺两个或更多图层...？

Something like an equivalent of 'Flattening' two or more layers in Photoshop...?

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

I can think of a round about way, but am not so sure about it. I export the contents of both the canvi (lol) in the form of .png's, and then have a third canvas element draw both images with some sort of blending algorithm (xor, blend, negative, etc.).

推荐答案

当然可以，你不需要任何有趣的库或任何东西，只需调用

Of course you can, and you don't need any funny libraries or anything, just call drawImage with a canvas as the image.

下面是一个示例，其中我将两个canvas元素组合到第三个：

Here is an example where I combine two canvas elements onto a third:

http://jsfiddle.net/bnwpS/15/

当然，你可以用两个（一个到另一个），但三个可以做一个更好的例子。

Of course you can do it with just two (one onto the other), but three makes for a better example.

如果你想要一个XOR效果或者某些东西，总是改变 globalCompositeOperation 。

You can always change the globalCompositeOperation if you want an XOR effect or something.

这篇关于将两个或多个Canvas元素与某种混合相结合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！