Html 将两个或多个 Canvas 元素与某种混合相结合

Combining two or more Canvas elements with some sort of blending

提问by Abhishek

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

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

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

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

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.).

我能想到一个方法，但不太确定。我以 .png 的形式导出两个 Canvi (lol) 的内容，然后让第三个 canvas 元素使用某种混合算法（异或、混合、负片等）绘制两个图像。

回答by Simon Sarris

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

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

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

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

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

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

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

当然，你可以只用两个（一个到另一个）来完成，但三个是一个更好的例子。

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

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

回答by Phrogz

If You Want 'Normal' Blend Mode

如果您想要“正常”混合模式

• Ensure that your canvaselements do not have a background specified in CSS. This will leave them transparent.

• Absolutely position all your canvaselements over top of each other. For example, wrap them all in a <div class="canvas-layers">and then use CSS like:

   /* 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 }
  

• Let the browser automatically perform the blending of semi-transparent areas over top of one another.

• 确保您的canvas元素没有在 CSS 中指定的背景。这将使它们保持透明。

• 绝对将所有canvas元素放置在彼此之上。例如，将它们全部包裹在 a 中<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 }
  

• 让浏览器自动执行半透明区域在彼此之上的混合。

If You Need 'Normal' Blend Mode on a Single Canvas

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

• If you absolutely must flatten them to a single canvas (e.g. you want to create a data uri from the result) then use drawImagewith one canvas as the source 'image'. For example, see:
  https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images#Using_other_canvas_elements

• 如果您绝对必须将它们展平到单个画布（例如，您想根据结果创建数据 uri），则使用drawImage一个画布作为源“图像”。例如，参见：https:
  //developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images#Using_other_canvas_elements

If You Want Simple Masking, Lighter, or Darker

如果你想要简单的遮罩，更亮或更暗

• Use the globalCompositeOperationproperty of the canvas context and use drawImagewith one canvas as the source. See an example here:
  https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

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

If You want Photoshop-Style Blend Modes

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

• I have created a simple, lightweight, open-source library for performing Photoshop-style blend modes from one HTML Canvas context to another: context-blender. Here's the sample usage:

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

  See the READMEfor more information.

• 我创建了一个简单、轻量级的开源库，用于从一个 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} );
  

  有关更多信息，请参阅自述文件。

回答by Tim

I think you are looking for something like the pixasticlibrary (Documentation).

我认为您正在寻找类似pixastic库（文档）的东西。

回答by Rickard

You could with css position 2 (or more) canvases over each other and let each work as a layer. Im not sure Exactly how to do this with css, but i've done something similar, have to canvases over eachother, one for 2d-content and one for webgl and the user could easily swap between them

您可以使用 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>

I guess that code is not bullet proff nor correct, but it works. Hope this helps.

我想该代码既不是项目符号也不是正确的，但它有效。希望这可以帮助。

If it doesnt I would use the workaround you mentioned. (I actually made a app like that where I drew 2d shadows to an offscreen canvas and drew it over the main canvas with transparency, looked pretty neat)

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