Tela - Os gradientes
Os gradientes podem ser usadas para preencher rectângulos, círculos, linhas de 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 de gradiente, é preciso acrescentar duas ou mais escalas de cores.
O addColorStop() método especifica as paradas de cor, e sua posição ao longo do gradiente. posições de gradiente pode estar em qualquer lugar entre 0-1.
Para usar o gradiente, defina a propriedade fillStyle ou strokeStyle ao gradiente, então desenhar a forma (rectangle, text, or a line) .
Usando createLinearGradient()
Exemplo
Criar um gradiente linear. Preencha o retângulo com o gradiente:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80); Tente você mesmo " Usando createRadialGradient() :
Exemplo
Criar um gradiente radial / circular. Preencha o retângulo com o gradiente:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); Tente você mesmo "