Gradiente | Tutorial de Canvas | #4 | #uninerds | Universo dos Nerds
10Código fonte da vídeo aula:
http://www.uninerds.net/?locale=pt_BR#!html-css-e-javascript/tutorial-de-canvas
Redes Sociais
Facebook: https://www.facebook.com/uninerds
Twitter: https://www.twitter.com/uninerds
YouTube: https://www.youtube.com/user/uninerds?sub_confirmation=1
LinkedIn: https://www.linkedin.com/company/uninerds
Instagram: https://www.instagram.com/uninerds
Gostou do vídeo? Veja 10 opções de como você pode apoiar o Universo dos Nerds:
https://youtu.be/KYAljlRtlb4
Hashtags: #uninerds #canvas #js #javascript
Afiliado: http://www.cursos24horas.com.br/parceiro.asp?cod=promocao131331
Contato: uninerds@uninerds.net
É o efeito que de uma cor alterna para outra e os dois tipos no canvas são linear e radial.
Para criar a linear é utilizado a função createLinearGradient e nela é informado as coordenadas x e y onde o efeito começa e termina.
Depois é necessário adicionar pelo menos duas cores que farão parte do efeito, para isso é utilizado a função addColorStop em que o primeiro valor vai de 0 até 1 e define a posição em que a cor irá ser prevalecente e a cor.
O último passo e definir o estilo em fillStyle para o que será desenhado.
Atenção: O efeito será aplicado nas coordenadas informadas, não no que for desenhado.
Para fazer o efeito radial é utilizado a função createRadialGradient e nela é informado as coordenadas x, y e o raio de onde o efeito começa e termina, os próximos passos são os mesmo para o linear.