Este é o sexto artigo de uma série que irá apresentar os recursos disponibilizados pela nova tag <canvas> do HTML5. Nesse artigo, veremos
Em todos os exemplos anteriores, as formas sempre eram desenhadas umas sobre as outras. Isso é mais do que adequado para a maioria das situações. Isso, por exemplo, limita a ordem em que formas compostas são construídas. Podemos, porém, mudar esse comportamento pelo ajuste da propriedade globalCompositeOperation
.
globalCompositeOperation
Podemos não apenas desenhar novas formas atrás de formas existentes, mas podemos também usa-la para mascarar certas áreas,limpar seções do canvas (não limitando-se por áreas retangulares como o método clearRect()
faz) e maisa.
globalCompositeOperation = type
- Isso ajusta o tipo de composição a ser aplicada quando se desenha novas formas, onde tipo é uma String que identifica quais das doze operações de composição será usada.
source-over Esse é o padrão e desenha a nova forma sobre o conteúdo existente. | ![]() |
destination-over As novas formas são desenhadas atrás do conteúdo existente. | ![]() |
source-in A nova forma é desenhada apenas onde se sobrepõe ao conteúdo existente. Todo o resto é feito transparente. | ![]() |
destination-in O conteúdo existente é mantido onde se sobrepõe à nova forma. Todo o resto é feito transparente. | ![]() |
source-out A nova forma é desenhada onde não se sobrepõe o conteúdo existente. | ![]() |
destination-out O conteúdo existe é mantido onde não se sobrepõe à nova forma. | ![]() |
source-atop A nova forma é desenhada apenas onde se sobrepõe ao conteúdo existente. | ![]() |
destination-atop O conteúdo existente é mantido apenas onde se sobrepõe à nova forma. A nova forma é desenhada por trás dele. | ![]() |
lighter Onde as duas formas se sobrepõem a cor é determinada pela soma dos seus valores. | ![]() |
darker Where Onde as duas formas se sobrepõem a cor é determinada pela subtração dos seus valores. Esse tipo foi removido da especificação do canvas há algum tempo e não é mais suportado. | ![]() |
xor As formas são feitas transparentes onde se sobrepõem e desenhadas nornalmente em todo o resto. | ![]() |
copy Desenha apenas a nova forma e remove todo o resto. | ![]() |
Você pode visualizar um exemplo desses modos de composição em operação; pode visualizar a saída aqui.
Caminhos de corte
Um caminho de corte é quase uma forma normal do canvas mas age como uma máscara para esconder partes não desejadas de formas. Isso é visto na imagem à direita. A forma da estrela em vermelho é nosso caminho de corte. Tudo o que está fora desse caminho não será desenhado no canvas.
Se compararmos caminhos de corte à propriedade globalCompositeOperation
vista acima, veremos que dois modos de composição alcançam mais ou menos o mesmo efeito ( source-in
e source-atop
). As diferenças mais importantes entre os dois é que o caminho de corte nunca é desenhado de fato no canvas e não é afetado pela adição de novas formas. Isso faz com que os caminhos de corte sejam a solução ideal para desenhar múltiplas formas em uma área restrita.
No capitulo Desenhando formas foram mencionados os método stroke()
e fill()
, mas existe um terceiro método que podemos usar para os caminhos, chamado clip()
.
clip()
- Transforma o caminho que está sendo construído em um caminho de corte.
Screenshot | Live sample |
---|---|
![]() |