in

html – html5 – elemento de lienzo – Varias capas

apple touch icon@2

Puede crear varios canvas elementos sin agregarlos al documento. Estos serán tus capas:

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

Ejemplo:

/* 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);

Y aquí hay un codepen: https://codepen.io/anon/pen/mQWMMW

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

60 150126 1566966196

Aplicaciones de la pila en la estructura de datos

005xF3NS0WSxnngqKTGJmy3 16.1635969638.fit lim.size 1200x630

Análisis de Velocity Micro Raptor Z55 (2021)