Atributo globalCompositeOperation del canvas HTML

Manual de referencia de HTML5 Canvas

Definición y uso

globalCompositeOperation La configuración de atributo o retorno define cómo se dibuja una imagen de origen (nueva) en una imagen de destino (ya existente).

Imagen de origen = El dibujo que tiene la intención de放置 en el lienzo.

Imagen de destino = El dibujo que ya ha colocado en el lienzo.

Ejemplo

Ejemplo 1

Dibuje 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

Su navegador no admite la etiqueta canvas.

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);

Pruebe personalmente

Ejemplo 2

Todos los valores de atributo globalCompositeOperation:

Pruebe personalmente

Sintaxis

context.globalCompositeOperation="source-in";

Valor de atributo

Valor Descripción
source-over Por defecto. Muestra la imagen de origen sobre la imagen de destino.
source-atop Muestra 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 Muestra 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, y la imagen de destino es transparente.
source-out Muestra 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, y la imagen de destino es transparente.
destination-over Muestra la imagen de destino sobre la imagen de origen.
destination-atop Muestra 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 Muestra 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, y la imagen de origen será transparente.
destination-out Muestra 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, y la imagen de origen será transparente.
lighter Muestra la imagen de origen + imagen de destino.
copy Muestra la imagen de origen. Ignora 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

Notas:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.

Manual de referencia de HTML5 Canvas