HTML canvas globalCompositeOperationPropiedad
Objeto CanvasEjemplo
Dibuja rectángulos usando diferentes valores de globalCompositeOperation. El rectángulo rojo esla imagen de destino, el rectángulo azul esla 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);
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);
Pruébalo »
Soporte del navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari soportan la propiedad globalCompositeOperation.
Nota:Internet Explorer 8 y versiones anteriores no soportan el elemento <canvas>.
Definición y uso
La propiedad globalCompositeOperation establece o devuelve cómo se dibuja una imagen de origen (nueva) sobre una imagen de destino (existente).
Imagen de origen =El dibujo que planea colocar en el lienzo.
Imagen de destino =El dibujo que ya ha colocado en el lienzo.
| Valor predeterminado: | source-over |
|---|---|
| Sintaxis de JavaScript: | context.globalCompositeOperation="source-in"; |
Valores de la propiedad
| Valor | Descripción |
|---|---|
| source-over | Predeterminado. Enla imagen de destinose muestrala imagen de origen。 |
| source-atop | EnEn la parte superior de la imagen de destinose muestrala imagen de origen.。La parte de la imagen de origenque se encuentrafuera de la imagen de destinoes invisible. |
| source-in | EnEn la imagen de destinose muestrala imagen de origen.. Solodentro de la imagen de destino,la parte dela imagen de origense muestra,la imagen de destinoes transparente. |
| source-out | EnFuera de la imagen de destinose muestrala imagen de origen.. Solofuera de la imagen de destino,la parte dela imagen de origense muestra,la imagen de destinoes transparente. |
| destination-over | EnEn la imagen de origense muestrala imagen de destino.。 |
| destination-atop | EnEn la parte superior de la imagen de origense muestrala imagen de destino.。La parte de la imagen de destinoque se encuentrafuera de la imagen de origenes invisible. |
| destination-in | EnEn la imagen de origense muestrala imagen de destino.. Solodentro de la imagen de origen,la parte dela imagen de destinose muestra,la imagen de origenes transparente. |
| destination-out | EnFuera de la imagen de origense muestrala imagen de destino.. Solofuera de la imagen de origen,la parte dela imagen de destinose muestra,la imagen de origenes transparente. |
| lighter | Muestrala imagen de origen + y la imagen de destino.。 |
| copy | Muestrala imagen de origen.Se ignorala imagen de destino.。 |
| xor | Mediante una operación XOR, se combinanla imagen de origenyy la imagen de destino. |
Otras extensiones