Combinando dois ou mais elementos do Canvas com algum tipo de mistura

É possível combinar o conteúdo de dois elementos de canvas separados em um único elemento de canvas?

Algo como um equivalente de ‘aplainar’ duas ou mais camadas no Photoshop …?

Eu posso pensar em uma rodada sobre o caminho, mas não tenho tanta certeza sobre isso. Eu exporte o conteúdo de ambos os canvi (lol) na forma de .png e, em seguida, tenho um terceiro elemento de canvas desenhar ambas as imagens com algum tipo de algoritmo de mistura (xor, mistura, negativo, etc.).

Claro que você pode, e você não precisa de nenhuma biblioteca engraçada ou nada, apenas chame drawImage com uma canvas como a imagem.

Aqui está um exemplo onde eu combino dois elementos de canvas em um terceiro:

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

Claro que você pode fazer isso com apenas dois (um sobre o outro), mas três são um exemplo melhor.

Você sempre pode alterar o globalCompositeOperation se quiser um efeito XOR ou algo assim.

Se você quer o modo de mistura “normal”

  • Certifique-se de que seus elementos da canvas não tenham um plano de fundo especificado em CSS. Isso os deixará transparentes.
  • Absolutamente posicione todos os elementos da sua canvas sobre um ao outro. Por exemplo, envolva todos eles em um

    e use CSS como:

      /* 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 } 
  • Deixe o navegador executar automaticamente a mesclagem de áreas semitransparentes por cima umas das outras.

Se você precisar do modo de mesclagem ‘Normal’ em uma única canvas

Se você quer mascarar simples, mais leve ou mais escuro

Se você quiser modos de mesclagem no estilo Photoshop

  • Eu criei uma biblioteca simples, leve e de código aberto para executar modos de mesclagem no estilo do Photoshop de um contexto de Canvas HTML para outro: o blender de contexto . Aqui está o uso da amostra:

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

    Veja o README para mais informações.

Eu acho que você está procurando algo como a biblioteca pixastic ( Documentation ).

Você poderia, com a posição css 2 (ou mais) canvass umas sobre as outras e deixar cada uma funcionar como uma camada. Não tenho certeza exatamente como fazer isso com css, mas eu fiz algo semelhante, tem que canvass sobre eachother, um para conteúdo 2d e um para webgl eo usuário poderia facilmente trocar entre eles

 

Eu acho que esse código não é bala proff nem correto, mas funciona. Espero que isto ajude.

Se não, eu usaria a solução alternativa que você mencionou. (Eu realmente fiz um aplicativo como esse, onde eu desenhava sombras 2D para uma canvas fora da canvas e desenhava sobre a canvas principal com transparência, parecia bem legal)