English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
No HTML5Quando você desenhar formas na tela, pode configurar como o conteúdo desenhado será composto com o conteúdo já desenhado na tela. Este artigo explica como mesclar o conteúdo de desenho com o conteúdo existente na tela.
2O contexto D possui duas propriedades que controlam o modo de composição da tela. Essas são:
globalAlpha
globalCompositeOperation
A propriedade globalAlpha determina a opacidade do conteúdo desenhado/Opacidade. Pode variar de 0 a1entre esses valores. 0 representa que o conteúdo desenhado é completamente transparente. O valor é 0.5Representa que o conteúdo desenhado é semi-transparente. O valor é1Representa que o conteúdo desenhado é completamente opaco. O valor padrão é1.
A propriedade globalAlpha é configurada da seguinte forma:
context.globalAlpha = 0.5;
A propriedade globalCompositeOperation determina como o conteúdo que você desenhou é mesclado com a grafia existente na tela.
A propriedade globalCompositeOperation é configurada da seguinte forma:
context.globalCompositeOperation = "copy";
A propriedade globalCompositeOperation referencia "origem" e "destino", e especifica como mesclar origem e destino. A origem é o conteúdo que você desenhou, e o destino é o conteúdo que já foi desenhado. A seguir está uma lista de possíveis valores e seus significados:
| valor | descrição |
copy | No lugar onde a origem e o destino se sobrepoem, a origem será exibida. |
destino-atop | O destino será exibido quando a origem e o destino se sobrepoem e ambos não são opacos.Se o destino for transparente, a origem será exibida. |
destino-in | No lugar onde a origem e o destino se sobrepoem e ambos não são opacos, o destino será exibido.O lugar onde não há sobreposição não exibirá a origem. |
destino-out | O destino será exibido em qualquer lugar onde a origem e o destino não se sobrepoem.A transparência será exibida em qualquer outro lugar. |
destino-over | No lugar onde a origem e o destino se sobrepoem, o destino será exibido.Se não houver sobreposição, a origem será exibida. |
origem-atop | No lugar onde a origem e o destino se sobrepoem, a origem será exibida.Será exibido o destino onde não há sobreposição ou onde a origem é transparente. |
origem-in | Quando a origem e o destino se sobrepoem e ambos não são opacos, a origem será exibida.A transparência será exibida em qualquer outro lugar. |
origem-out | No lugar onde a origem e o destino não se sobrepoem, a origem será exibida.A transparência será exibida em qualquer outro lugar. |
origem-over | Quando a origem é opaca, a origem será exibida.o destino é exibido em qualquer outro lugar.}} |
lighter | As cores de origem e destino se sobrepoem, tornando as cores mais brilhantes, na direção de1mover o valor do brilho (a maior luminosidade da cor). |
xor |
Este é um exemplo de canvas onde você pode usar modos de composição e valores alpha. Você pode alterar os modos de composição clicando no botão. Você pode alterar o modo Alpha usando os controles abaixo do canvas.
globalAlpha
se você ver o campo de texto globalAlpha, insira valores entre 0 e10valores entre 0 e 1. O código convertirá os valores para 0 a1valores entre 0.0 e 1.0. Caso contrário, use o deslizador.
Atenção: No momento da redação deste artigo, Firefox e Chrome tratam desses modos de composição de forma diferente. Parece também que eles se comportam de maneira diferente com rects e text, como esses modos funcionam. Experimente diferentes modos em diferentes navegadores que você planeja suportar para entender como eles funcionam.