javascript - que - Implementación de capas en HTML5 Canvas
html5 canvas drawing (4)
El uso de lienzos múltiples debe ser más rápido, ya que el lienzo se dibuja fuera de la pantalla y luego el navegador lo desplaza a la pantalla. Pones la carga de cambiar capas en el navegador, que solo tiene que mover algunos rectángulos de datos gráficos.
Si haces las capas tú mismo, tienes más control, pero la carga está en el JS y el motor JS para hacer todo el trabajo. Evitaría esto si pudiera elegir, pero si buscas efectos de capa que funcionen en las capas subyacentes, esta podría ser tu única opción.
Estoy por implementar Capas similares a Photoshop en HTML5 Canvas. Actualmente tengo dos ideas. La primera y tal vez la idea más simple es tener un elemento Canvas para cada capa como:
<canvas id="layerName" width="320" height="240" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
<canvas id="layerName" width="320" height="240" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
<canvas id="layerName" width="320" height="240" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
De esta forma, cuando dibuja en una capa, de hecho va a esa "capa". Las capas con posiciones transparentes se pueden ver a través de las capas inferiores (Lienzos). El apilamiento de capas se controla con la propiedad z-index .
La segunda idea es usar un único elemento Canvas e implementar cierta lógica para manejar capas como en este caso:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script>
window.addEventListener(''load'', function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var order = 0;
function drawLayer1() {
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
}
function drawLayer2() {
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
function draw() {
ctx.clearRect(0, 0, 256, 256);
if (order === 0) {
drawLayer1();
drawLayer2();
}
else {
drawLayer2();
drawLayer1();
}
}
setInterval(draw, 250);
setInterval(function() {
order = 1 - order;
}, 200);
}, false);
</script>
</head>
<body>
<canvas id="canvas" width="256px" height="256px"></canvas>
</body>
</html>
En el código anterior, las dos capas cambiarán el orden de apilamiento cada 200 ms.
Entonces, la pregunta es ¿cuál sería la mejor manera? ¿Cuáles son los pros y los contras de ambos enfoques?
Establecer el pariente div del contenedor debería haber evitado ese problema de sobrescritura de capa. Intente establecer la posición en el "texto ocluido"; por ejemplo, si actualmente está ausente, irá obviamente en la misma región que la parte superior izquierda de la información relativa.
Y probablemente sea obvio, pero, por el orden de los divs en html, puedes eliminar el uso del eje z. Si quieres que tus cosas sean genéricas (y para otros desarrolladores también), utiliza el eje z pero almacena una línea de base a la que agregas los índices de capa (para que la línea de base pueda ajustarse cuando uses otro código usando el eje z de una manera problemática )
Si desea utilizar un solo elemento de lienzo y tener varias capas dentro de él, le recomendamos que consulte mi biblioteca:
Utiliza un sistema recto dañado para reducir la cantidad de repintado que se realiza cada vez que cambia el lienzo, por lo que no solo obtendrá capas (que pueden anidarse), sino que también obtendrá rediseños optimizados.
Aquí hay una demostración simple:
Usando jCanvas , vea su API de capa: http://projects.calebevans.me/jcanvas/docs/layerAPI/