|
Os gradientes podem ser usados para preencher retângulos, círculos, linhas, texto, etc formas na tela não estão limitados a cores sólidas.
Existem dois tipos diferentes de gradientes:
createLinearGradient ( X, Y, x1, y1 ) - cria um gradiente linear
createRadialGradient ( x, y, r, x1, y1, r1 ) - cria um gradiente radial / circular
Uma vez que temos um objeto gradiente, devemos adicionar duas ou mais paradas de cor.
O método addColorStop () especifica os limites de cor, e sua posição ao longo do gradiente. Posições de inclinação pode ser em qualquer lugar entre 0-1.
Para usar o gradiente, defina a propriedade fillStyle ou strokeStyle ao gradiente, e então desenhar a forma, como um retângulo, um texto ou uma linha.
Usando createLinearGradient ():
Exemplo
Criar um gradiente linear. Preencha o retângulo com gradiente:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:
1px solid #d3d3d3;">
O navegador não suporta a tag canvas do HTML5
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
Usando createRadialGradient ():
Exemplo
Criar um gradiente radial / circular. Preencha o retângulo com gradiente:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:
1px solid #d3d3d3;">
O navegador não suporta a tag canvas do HTML5
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
Veja Mais:
- Desenhando texto usando canvas no HTML5- Desenhar curvas ou arcos em canvas com HTML5
- Criar um retangulo sobre outro transparente com canvas no HTML5
- Coordenadas do Canvas no HTML5
- Elemento canvas em HTML5
- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5
0 comentários:
Postar um comentário