Exemplo
Desenhar retângulos usando dois valores globalCompositeOperation diferentes. Retângulos vermelhos sãoimagens de destino.Retângulos azuis sãoimagens de origem:
source-over
destino-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);
Tente você mesmo " Suporte a navegadores
Internet Explorer 9, Firefox, Opera, Chrome e Safari suporta a propriedade globalCompositeOperation.
Nota: Internet Explorer 8 e versões anteriores, não suportam o <canvas> elemento.
Definição e Uso
Os conjuntos de propriedades globalCompositeOperation ou retornos como uma imagem de origem (novo) são desenhadas para um destino de imagem (existente).
class = source "notranslate" imagem = desenhos que você está prestes a colocar sobre a tela.
destination image = desenhos que já foram colocados sobre a tela.
| Valor padrão: | source-over |
|---|---|
| sintaxe JavaScript: | context.globalCompositeOperation="source-in"; |
Os valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| source-over | Padrão. Exibe a imagem de origem sobre a imagem de destino | Jogue " |
| source-atop | Exibe a imagem de origem em cima da imagem de destino. A parte daimagemdeorigemque está fora daimagem de destinonão é mostrado | Jogue " |
| source-in | Exibe a imagem de origem para a imagem de destino. Somente a parte daimagemdeorigemque está dentro daimagem de destinoé mostrado, e aimagemdedestinoé transparente | Jogue " |
| source-out | Exibe a imagem de origem fora da imagem de destino. Somente a parte daimagemdeorigemque está fora daimagem de destinoé mostrado, e aimagemdedestinoé transparente | Jogue " |
| destination-over | Exibe a imagem de destino sobre a imagem de origem | Jogue " |
| destination-atop | Exibe a imagem de destino em cima da imagem de origem. A parte daimagemdedestinoque está fora daimagem de origemnão é mostrado | Jogue " |
| destination-in | Exibe a imagem de destino em que a imagem de origem. Somente a parte daimagemdedestinoque está dentro daimagem de origemé mostrada, e aimagemdeorigemé transparente | Jogue " |
| destination-out | Exibe a imagem de destino fora da imagem de origem. Somente a parte daimagemdedestinoque está fora daimagem de origemé mostrada, e aimagemdeorigemé transparente | Jogue " |
| lighter | Exibe a imagem de destino imagem de origem + | Jogue " |
| copy | Exibe a imagem de origem. A imagem de destino é ignorado | Jogue " |
| xor | A imagem de origem é combinado usando um OU exclusivo com a imagem de destino | Jogue " |
Exemplo
Todos os valores de propriedade globalCompositeOperation:
source-over:
source-no topo:
source-in:
source-out:
destino a cargo:
destino-em cima:
destino-in:
destino-out:
isqueiro:
cópia:
xor: