Ejemplo
Dibujar rectángulos utilizando dos valores globalCompositeOperation diferentes. Rectángulos rojos son destination images . Rectángulos azules son source images :
fuente-over
destino en off
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 del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| globalCompositeOperation | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definición y Uso
Los conjuntos de propiedades globalCompositeOperation o devoluciones cómo una fuente (new) la imagen se dibujan en un destino (existing) de la imagen.
origen de la imagen = dibujos que están a punto de colocar en el lienzo.
imagen de destino = 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 la source image que es la parte exterior destination image no se muestra | Juegalo " |
| source-in | Muestra la imagen de origen a la de destino. Sólo la parte de la source image que es el interior destination image se muestra, y la destination image es transparente | Juegalo " |
| source-out | Muestra la imagen de la fuente de la imagen de destino. Sólo la parte de la source image que es el exterior destination image se muestra, y la destination image es 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 de origen. La parte de la destination image que es el exterior source image no se muestra | Juegalo " |
| destination-in | Muestra la imagen de destino para la imagen de origen. Sólo la parte de la destination image que es el interior source image se muestra, y la source image es transparente | Juegalo " |
| destination-out | Muestra la imagen de destino de la imagen de origen. Sólo la parte de la destination image que es el exterior source image se muestra, y la source image es 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 fuente se combina mediante el uso de un OR exclusivo la imagen de destino con | Juegalo " |
<Objeto Canvas