semanticas - html5-elemento de lona-Varias capas

section html5 ejemplos

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

Entiendo que la Q no quiere usar una biblioteca, pero la ofreceré a otros que provengan de búsquedas de Google. @EricRowell mencionó un buen complemento, 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.

Answer 2

Puede crear varios elementos de canvas sin agregarlos a un documento. Estas serán tus capas :

Luego haga lo que quiera con ellos y al final solo renderice su contenido en el orden correcto en el lienzo de destino usando drawImage en context .

Answer 3

Relacionado con esto:

Si tiene algo en el lienzo y desea dibujar algo en la parte posterior del mismo, puede hacerlo cambiando la configuración context.globalCompositeOperation a ''destination-over'' y luego devolverla a ''source-over'' cuando '' re hecho.

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 4

También estaba teniendo este mismo problema, 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í 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 agregar capacidades adicionales, pero por ahora lo hará.

Puede hacer múltiples funciones y llamarlas para "falsificar" capas.

Answer 5

También puede consultar http://www.concretejs.com, que es un marco lienzo Html5 moderno y liviano que permite la detección de impactos, capas y muchas otras cosas periféricas. Puedes 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

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 la clearRect en la capa superior, se mostrará todo lo que esté en el lienzo inferior.