Índice
Existem diferentes tipos de efeitos e transformações que pode ser aplicado em canvas, permite gerar imagens que antes só podiam ser imaginadas em flash e outras ferramentas semelhantes.Entre estes efeitos temos a criação de sombras que nos permite dar um relevo aos desenhos que incorporamos no nosso tela de pinturaExistem também efeitos de transparência, que nos permitem sobrepor um elemento a outro, gerando infinitas probabilidades de projeto.
Tons
As sombras nos permitem dar um efeito de profundidade e relevo aos nossos elementos, na tela podemos incorporar essas sombras aos elementos, para isso temos as seguintes propriedades que nos permitem personalizá-los de acordo com o que queremos alcançar com eles:
- shadowBlur: Define o grau de nitidez da sombra para um valor mais alto, menos nitidez e mais dispersão dela.
- shadowColor: Permite definir a cor da sombra.
- shadowOffsetX: Define o ponto de saída horizontal da sombra.
- shadowOffsetY: Define o ponto de queda vertical da sombra.
Exemplo Seu navegador não suporta o elemento tela de pintura Neste exemplo, aplicamos sombras a um retângulo, bem como a um texto e uma curva, vamos ver como fica no navegador:
Para estabelecer a transparência, temos duas maneiras, a primeira é usar o função rgba em atributos fillStyle Y strokeStyle; a segunda maneira que temos é usar a propriedade de desenho globalAlpha que se aplica universalmente.
Vejamos a seguir um exemplo utilizando a segunda forma que é a mais simples e direta de aplicar, destacamos que os valores que ela aceita globalAlpha está 0 para transparência total Y 1 para torná-lo totalmente opaco, no caso do exemplo, usaremos 0,5 como um valor que nos permite um meio-termo:
Exemplo Seu navegador não suporta o elemento tela de pintura Como podemos ver, o que fizemos foi desenhar um retângulo sobre o texto e graças a globalAlpha vemos o efeito de transparência que nos permite apreciar as duas figuras desenhadas:
