html5 - elemento canvas - Várias camadas

Sem nenhuma biblioteca de extensão, é possível ter várias camadas no mesmo elemento da tela?

Então, se eu fizer um clearRect na camada superior, ela não apagará a inferior?

Obrigado.

Não, no entanto, você pode colocar vários <canvas>elementos em camadas uns sobre os outros e realizar algo semelhante.

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

Desenhe sua primeira camada na layer1tela e a segunda camada na layer2tela. Então, quando você estiver clearRectna camada superior, o que estiver na tela inferior será exibido.

Relacionado a isso:

Se você tem algo na tela e deseja desenhar algo na parte de trás, altere a configuração context.globalCompositeOperation para 'destination-over' - e retorne-a para 'source-over' quando você ' re feito.

   var context = document.getElementById('cvs').getContext('2d');

    // Draw a red square
    context.fillStyle = 'red';
    context.fillRect(50,50,100,100);



    // Change the globalCompositeOperation to destination-over so that anything
    // that is drawn on to the canvas from this point on is drawn at the back
    // of what's already on the canvas
    context.globalCompositeOperation = 'destination-over';



    // Draw a big yellow rectangle
    context.fillStyle = 'yellow';
    context.fillRect(0,0,600,250);


    // Now return the globalCompositeOperation to source-over and draw a
    // blue rectangle
    context.globalCompositeOperation = 'source-over';

    // Draw a blue rectangle
    context.fillStyle = 'blue';
    context.fillRect(75,75,100,100);

<canvas id="cvs" />

Você pode criar vários canvaselementos sem anexá-los ao documento. Estas serão as suas camadas :

Em seguida, fazer o que quiser com eles e no final apenas tornar o seu conteúdo na ordem correta na tela de destino usando drawImageon context.

Exemplo:

/* using canvas from DOM */
var domCanvas = document.getElementById('some-canvas');
var domContext = domCanvas.getContext('2d');
domContext.fillRect(50,50,150,50);

/* virtual canvase 1 - not appended to the DOM */
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50,50,150,150);

/* virtual canvase 2 - not appended to the DOM */    
var canvas2 = document.createElement('canvas')
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = 'yellow';
ctx2.fillRect(50,50,100,50)

/* render virtual canvases on DOM canvas */
domContext.drawImage(canvas, 0, 0, 200, 200);
domContext.drawImage(canvas2, 0, 0, 200, 200);

E aqui está um código de código: https://codepen.io/anon/pen/mQWMMW

Eu também estava tendo esse mesmo problema, enquanto vários elementos da tela com posição: absoluto faz o trabalho, se você deseja salvar a saída em uma imagem, isso não vai funcionar.

Então, fui adiante e criei um "sistema" de camadas simples para codificar como se cada camada tivesse seu próprio código, mas tudo é renderizado no mesmo elemento.

https://github.com/federicojacobi/layeredCanvas

Eu pretendo adicionar recursos extras, mas por enquanto isso fará.

Você pode executar várias funções e chamá-las para "falsificar" as camadas.

Você também pode verificar o site http://www.concretejs.com, que é uma estrutura de tela Html5 moderna e leve, que permite a detecção de hits, camadas e muitas outras coisas periféricas. Você pode fazer coisas assim:

var wrapper = new Concrete.Wrapper({
  width: 500,
  height: 300,
  container: el
});

var layer1 = new Concrete.Layer();
var layer2 = new Concrete.Layer();

wrapper.add(layer1).add(layer2);

// draw stuff
layer1.sceneCanvas.context.fillStyle = 'red';
layer1.sceneCanvas.context.fillRect(0, 0, 100, 100);

// reorder layers
layer1.moveUp();

// destroy a layer
layer1.destroy();

Entendo que o Q não deseja usar uma biblioteca, mas vou oferecê-lo a outros provenientes de pesquisas no Google. O @EricRowell mencionou um bom plugin, mas também existe outro plugin que você pode tentar, o html2canvas .

No nosso caso, estamos usando PNG transparentes em camadas com z-indexum widget "construtor de produtos". O Html2canvas trabalhou brilhantemente para reduzir a pilha sem empurrar imagens, nem usar complexidades, soluções alternativas e a própria tela "não responsiva". Não conseguimos fazer isso sem problemas / com a tela de baunilha + JS.

Primeiro use z-indexem divs absolutas para gerar conteúdo em camadas dentro de um invólucro posicionado relativo. Em seguida, passe o wrapper pelo html2canvas para obter uma tela renderizada, que você pode deixar como está, ou como uma imagem para que um cliente possa salvá-la.

mas a camada 02 cobrirá todos os desenhos da camada 01. Usei isso para mostrar o desenho nas duas camadas. use (cor de fundo: transparente;) em grande estilo.

    <div style="position: relative;"> 
      <canvas id="lay01" width="500" height="500" style="position: absolute; left: 0; top: 0; z-index: 0; background-color: transparent;">
      </canvas> 
      <canvas id="lay02" width="500" height="500" style="position: absolute; left: 0; top: 0; z-index: 1; background-color: transparent;">
      </canvas>
</div>