Ejemplo
Dibujar rectángulos utilizando dos valores diferentes globalCompositeOperation. Rectángulos rojos sonimágenes de destino.Rectángulos azules sonimágenes de origen:
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);
Inténtalo tú mismo " Soporte para el navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari admite la propiedad globalCompositeOperation.
Nota: Internet Explorer 8 y versiones anteriores, no son compatibles con el <canvas> elemento.
Definición y Uso
Los conjuntos de propiedades globalCompositeOperation o devoluciones de cómo una imagen de origen (nuevo) se dibujan en un destino de imagen (existente).
class = "notranslate" Fuente de la imagen = dibujos que están a punto de colocar en el lienzo.
destination image = dibujos que ya están colocados en el lienzo.
| Valor por defecto: | fuente-over |
|---|---|
| la sintaxis de JavaScript: | context.globalCompositeOperation="source-in"; |
Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| source-over | Defecto. Muestra la imagen original sobre la imagen de destino | Juegalo " |
| source-atop | Muestra la imagen de la fuente en la parte superior de la imagen de destino. La parte de laimagen originalque es laimagendedestino en elexterior no se muestra | Juegalo " |
| source-in | Muestra la imagen de origen a la de destino. Sólo se muestra la parte de laimagendeorigenque esla imagendedestinodentro, y laimagendedestinoes transparente | Juegalo " |
| source-out | Muestra la imagen de la fuente de la imagen de destino. Sólo se muestra la parte de laimagendeorigenque es laimagendedestino en elexterior, y laimagen de destinoes transparente | Juegalo " |
| destination-over | Muestra la imagen de destino la imagen original | Juegalo " |
| destination-atop | Muestra la imagen de destino en la parte superior de la imagen original. La parte de laimagendedestinoque esla imagendeorigenexterior no se muestra | Juegalo " |
| destination-in | Muestra la imagen de destino para la imagen de origen. Sólo se muestra la parte de laimagen de destinoque esla imagendeorigendentro, y laimagendeorigenes transparente | Juegalo " |
| destination-out | Muestra la imagen de destino de la imagen de origen. Sólo se muestra la parte de laimagen de destinoque esla imagen delafuenteexterna, y laimagendeorigenes transparente | Juegalo " |
| lighter | Muestra la imagen de destino de imagen + fuente | Juegalo " |
| copy | Muestra la imagen de origen. La imagen de destino se ignora | Juegalo " |
| xor | La imagen original se combina con un OR exclusivo con la imagen de destino | Juegalo " |
Ejemplo
Todos los valores de las propiedades globalCompositeOperation: