Combinar trazados
globalCompositeOperation
Para combinar trazados en el <canvas> podemos utilizar la propiedad globalCompositeOperation.
Esta propiedad define la apariencia de nuevos trazados, y como estos afectan o están afectados por los trazados ya existentes en el <canvas>.
Para combinar trazados la propiedad globalCompositeOperation puede tomar 12 valores diferentes. ( También podemos utilizar la propiedad globalCompositeOperation para fusionar dos capas en canvas. )
Lea más acerca de los modos de fusión ( blend modes ) en <canvas>.
Un poco de inglés
Podemos traducir destination image ( la imagen azul de los ejemplos anteriores ) como imagen de destino y representa la imagen ya existente en el <canvas> cuando empezamos a dibujar el nuevo trazado.
Por ejemplo cuando el valor de la propiedad globalCompositeOperation = "destination-over" quiere decir que la imagen de destino, o la imagen existente está encima ( over ) de la nueva imagen.
Podemos traducir source image ( la imagen anaranjada de los ejemplos anteriores ) como imagen de origen o imagen fuente y representa la nueva imagen que dibujaremos en el <canvas>.
Por tanto cuando el valor de la propiedad globalCompositeOperation = "source-over" quiere decir que la imagen de origen, o la nueva imagen está encima ( over ) de la imagen de destino.
| Valor | Descripcion |
|---|---|
| source-over | Valor por defecto. La nueva imagen ( source ) aparece ENCIMA de la imagen existente ( destination ). |
| source-in | La nueva imagen ( source ) aparece SOLO ENCIMA de la imagen existente ( destination ), mientras que la imagen existente vuelve transparente. |
| source-out | La nueva imagen ( source ) aparece solo AL EXTERIOR de la imagen existente ( destination ), mientras que la imagen existente vuelve transparente. |
| source-atop | La nueva imagen ( source ) aparece SOLO ENCIMA de la imagen existente ( destination ). |
| destination-over | La imagen existente( destination ) aparece ENCIMA de la nueva imagen ( source ). |
| destination-atop | La imagen existente( destination ) aparece SOLO ENCIMA de la nueva imagen ( source ). |
| destination-in | La imagen existente ( destination ), aparece SOLO ENCIMA de la nueva imagen ( source ) mientras que la nueva imagen ( source ) vuelve transparente. |
| destination-out | La imagen existente ( destination ), aparece solo AL EXTERIOR de la nueva imagen ( source ) mientras que la nueva imagen vuelve transparente. |
| lighter | La intersección de las dos imágenes más clara. |
| darker | La intersección de las dos imágenes más oscura. |
| copy | Solo la nueva imagen ( source ) está visible, mientras que la imagen existente ( destination ), es ignorada. |
| xor | La nueva imagen ( source ) se combina con la imagen existente ( destination ) utilizando una disyunción exclusiva (exclusive or). |
Vea la chuleta con las propiedades y metodos() de canvas.
Un ejemplo fácil con "xor"
A continuación superpondremos dos rectángulos que combinamos con globalCompositeOperation = "xor".
var canvas = document.getElementById("lienzo1");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
var x=80, y=15, w=75, h=75, color = "#0000ff";
var x1=95, y1=40, w1=75, h1=75, color1 = "#ff6400";
ctx.globalCompositeOperation = "xor";
ctx.fillStyle = color;
ctx.fillRect(x,y,w,h);
ctx.fillStyle = color1;
ctx.fillRect(x1,y1,w1,h1);
}
}Otro ejemplo con "destination-out"
En el siguiente ejemplo el <canvas> tiene una imagen de fondo asignada con el CSS.
Después de haber dibujado un rectángulo, utilizaremos el método globalCompositeOperation = "destination-out" para borrar parte de este.
var canvas1 = document.getElementById("lienzo2");
if (canvas1 && canvas1.getContext) {
var ctx1 = canvas1.getContext("2d");
if (ctx1) {
ctx1.beginPath();
ctx1.fillStyle = "#6a50b1";
ctx1.fillRect(50, 40, 150, 120);
ctx1.globalCompositeOperation = "destination-out";
ctx1.fillRect(70, 60, 110, 60);
}
}Más acerca de globalCompositeOperation en canvas