HTML canvas globalCompositeOperationPropiedad
Ejemplo
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 »
Compatibilidad del navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari admiten la propiedad globalCompositeOperation.
Nota:Internet Explorer 8 y versiones anteriores no admiten 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 desea 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 | EnSobre la imagen de destinose muestrala imagen de origen。La parte de la imagen de origenque estáfuera de la imagen de destinoes invisible. |
| source-in | EnDentro de la imagen de destinose muestrala imagen de origen. Solola imagen de destinodentro dela imagen de origense muestra la parte,la imagen de destinoes transparente. |
| source-out | EnFuera de la imagen de destinose muestrala imagen de origen. Solola imagen de destinofuera dela imagen de origense muestra la parte,la imagen de destinoes transparente. |
| destination-over | EnSobre la imagen de origense muestrala imagen de destino。 |
| destination-atop | EnSobre la imagen de origense muestrala imagen de destino。La imagen de destinoque estáfuera de la imagen de origenes invisible. |
| destination-in | EnDentro de la imagen de origense muestrala imagen de destino. Solola imagen de origendentro dela imagen de destinose muestra la parte,la imagen de origenes transparente. |
| destination-out | EnFuera de la imagen de origense muestrala imagen de destino. Solola imagen de origenfuera dela imagen de destinose muestra la parte,la imagen de origenes transparente. |
| lighter | Muestrala imagen de origen + y la imagen de destino。 |
| copy | Muestrala imagen de origen. Ignorala imagen de destino。 |
| xor | Usando una operación XORla imagen de origenyy la imagen de destinose combinan. |
Referencia de HTML canvas Otras extensiones