Atributo globalCompositeOperation de Canvas
Definición y uso
globalCompositeOperation Configuración de propiedades o retorno de cómo se dibuja una imagen de origen (nueva) en una imagen de destino (ya existente).
Imagen de origen = Dibujo que planea colocar en el lienzo.
Imagen de destino = Dibujo que ya ha colocado en el lienzo.
Ejemplo
Ejemplo 1
Dibujar rectángulos con diferentes valores de globalCompositeOperation. El rectángulo rojo es la imagen de destino. El rectángulo azul es la imagen de origen:
source-over destination-over
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);
Ejemplo 2
Todos los valores de atributo globalCompositeOperation:
Sintaxis
context.globalCompositeOperation="source-in";
Valor del atributo
| Valor | Descripción |
|---|---|
| source-over | Predeterminado. Mostrar la imagen de origen sobre la imagen de destino. |
| source-atop | Mostrar la imagen de origen en la parte superior de la imagen de destino. La parte de la imagen de origen fuera de la imagen de destino no es visible. |
| source-in | Mostrar la imagen de origen dentro de la imagen de destino. Solo se mostrará la parte de la imagen de origen dentro de la imagen de destino, la imagen de destino es transparente. |
| source-out | Mostrar la imagen de origen fuera de la imagen de destino. Solo se mostrará la parte de la imagen de origen fuera de la imagen de destino, la imagen de destino es transparente. |
| destination-over | Mostrar la imagen de destino encima de la imagen de origen. |
| destination-atop | Mostrar la imagen de destino en la parte superior de la imagen de origen. La parte de la imagen de destino fuera de la imagen de origen no se mostrará. |
| destination-in | Mostrar la imagen de destino dentro de la imagen de origen. Solo se mostrará la parte de la imagen de destino dentro de la imagen de origen, la imagen de origen es transparente. |
| destination-out | Mostrar la imagen de destino fuera de la imagen de origen. Solo se mostrará la parte de la imagen de destino fuera de la imagen de origen, la imagen de origen es transparente. |
| más claro | Mostrar la imagen de origen + imagen de destino. |
| copiar | Mostrar la imagen de origen. Ignorar la imagen de destino. |
| xor | Combine la imagen de origen con la imagen de destino utilizando la operación de XOR. |
Detalles técnicos
| Valor predeterminado: | source-over |
|---|
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente la propiedad.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
