Gradientes do Canvas HTML

Canvas - Gradientes

Gradientes podem ser usados para preencher retângulos, círculos, linhas, textos e mais. As formas na canvas não estão limitadas a cores puras.

Existem dois tipos diferentes de gradientes:

• createLinearGradient(x,y,x1,y1) - Criar gradiente linear
• createRadialGradient(x,y,r,x1,y1,r1) - Criar gradiente radial/circular

Assim que temos o objeto de gradiente, devemos adicionar duas ou mais cores.

O método addColorStop() define o ponto de parada da cor e sua posição ao longo do gradiente. A posição do gradiente pode ser qualquer valor entre 0 e 1.

Para usar gradiente, defina a propriedade fillStyle ou strokeStyle como gradiente e desenhe a forma (retângulo, texto ou linha).

Usar createLinearGradient()

Exemplo

Criar gradiente linear. Usar gradiente para preencher retângulo:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Criar gradiente
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "vermelho");
grd.addColorStop(1, "branco");
// Usar preenchimento de gradiente
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Experimente você mesmo

Usar createRadialGradient():

Exemplo

Criar gradiente radial/circular. Usar gradiente para preencher retângulo:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Criar gradiente
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "vermelho");
grd.addColorStop(1, "branco");
// Usar preenchimento de gradiente
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Experimente você mesmo

Veja também:

Manual Completo de Referência do Canvas do CodeW3C.com