html5 - elemento de lienzo - Varias capas

Question

Sin ninguna biblioteca de extensión, ¿es posible tener varias capas en el mismo elemento de lienzo?

Entonces, si hago un clearRect en la capa superior, ¿no borrará el de abajo?

Gracias.

Answer 1

No, sin embargo, podría superponer varios elementos <canvas> uno encima del otro y lograr algo similar.

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

Dibuja tu primera capa en el lienzo layer1, y la segunda capa en el lienzo layer2. Luego, cuando clearRect en la capa superior, se mostrará todo lo que está en el lienzo inferior.

Answer 2

En relación con esto:

Si usted tiene algo en el lienzo y quiere dibujar algo en la parte posterior de la misma - se puede hacer cambiando el ajuste context.globalCompositeOperation a 'destino en off' - y luego, devuélvalo a 'source-over' cuando haya terminado.

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

// Draw a red square 

co.fillStyle = 'red'; 
co.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 whats already on the canvas 

co.globalCompositeOperation = 'destination-over'; 



// Draw a big yellow rectangle 

co.fillStyle = 'yellow'; 
co.fillRect(0,0,600,250); 


// Now return the globalCompositeOperation to source-over and draw a 
// blue rectangle 

co.globalCompositeOperation = 'source-over'; 

co.fillStyle = 'blue'; 
co.fillRect(75,75,100,100); 

Answer 3

Se pueden crear múltiples elementos canvas sin añadiéndolos en el documento. Estas serán sus capas :

Entonces haz lo que quieras con ellos y al final acaba de hacer que su contenido en el orden correcto en el lienzo de destino mediante drawImage en context.

Answer 4

Estaba teniendo este mismo problema también, mientras que múltiples elementos de lienzo con posición: absoluto hace el trabajo, si desea guardar el resultado en una imagen, eso no va a funcionar.

Así que seguí adelante e hice un simple "sistema" de capas para codificar como si cada capa tuviera su propio código, pero todo se procesa en el mismo elemento.

https://github.com/federicojacobi/layeredCanvas

tengo la intención de añadir capacidades adicionales, pero por ahora se va a hacer.

Puede hacer varias funciones y llamarlas para "falsificar" capas.

Answer 5

También puede consultar http://www.concretejs.com que es un marco de lona Html5 moderno y liviano que permite la detección de golpes, capas y muchas otras cosas periféricas. Se pueden hacer cosas como esta:

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(); 

Answer 6

entiendo que la Q no quiere utilizar una biblioteca, pero voy a exponer esto para otros procedentes de las búsquedas de Google. @EricRowell mencionó un buen plugin, pero también hay otro plugin que puedes probar, html2canvas.

En nuestro caso, utilizamos PNG transparentes en capas con z-index como un widget de "generador de productos". Html2canvas funcionó brillantemente para reducir la pila sin forzar imágenes, ni utilizar complejidades, soluciones ni el propio lienzo "sin respuesta". No pudimos hacer esto suavemente/con el lienzo vainilla + JS.

Primero use z-index en divs absolutos para generar contenido estratificado dentro de un contenedor de posición relativa. A continuación, canalice el contenedor a través de html2canvas para obtener un lienzo renderizado, que puede dejar tal como está o salir como una imagen para que un cliente pueda guardarlo.