Exemplo
Desenhar retângulos usando dois valores globalCompositeOperation diferentes. Retângulos vermelhos são destination images . Retângulos azuis são source images :
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 navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente a propriedade.
| Propriedade | |||||
|---|---|---|---|---|---|
| globalCompositeOperation | 4.0 | 9 | 3,6 | 4.0 | 10.1 |
Definição e Uso
Os conjuntos de propriedades globalCompositeOperation ou retornos como uma fonte (new) imagem são desenhadas para um destino (existing) de imagem.
fonte da imagem = desenhos que você está prestes a colocar sobre a tela.
imagem de destino = desenhos que já estão colocados sobre a tela.
| Valor padrão: | source-over |
|---|---|
| sintaxe JavaScript: | context .globalCompositeOperation="source-in"; |
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 da source image que está fora da destination image não é mostrado | Jogue " |
| source-in | Exibe a imagem de origem para a imagem de destino. Somente a parte da source image que está dentro da destination image é mostrado, ea destination image é transparente | Jogue " |
| source-out | Exibe a imagem de origem fora da imagem de destino. Somente a parte da source image que está fora da destination image é mostrado, ea destination image é 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 da destination image que está fora da source image não é mostrado | Jogue " |
| destination-in | Exibe a imagem de destino para a imagem de origem. Somente a parte da destination image que está dentro da source image é mostrado, ea source image é transparente | Jogue " |
| destination-out | Exibe a imagem de destino fora da imagem de origem. Somente a parte da destination image que está fora da source image é mostrado, ea source image é 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 OR exclusivo com a imagem de destino | Jogue " |
<Object Canvas