Canvas API: Gradiente Linear e Radial

O elemento Canvas permite o uso de gradientes como fundo. Para isso, utilizamos o objeto CanvasGradient, que pode ser criado através do método createLinearGradient() (para gradiente linear) ou do método createRadialGradient() (para gradiente radial).

Gradiente Linear

O gradiente linear é criado com o método createLinearGradient(x0, y0, x1, y1), onde x0 e y0 são as coordenadas iniciais do gradiente em relação ao canto superior esquerdo do canvas, e x1 e y1 são as coordenadas do ponto final do gradiente. Por exemplo:

const gradient = context.createLinearGradient(50, 30, 150, 150);

Para definir as cores no gradiente, é necessário especificar pontos de parada de cor. Isso é feito com o método addColorStop(offset, color) do objeto CanvasGradient, onde offset é a posição do ponto de cor no gradiente, e color é a cor correspondente. Por exemplo:

gradient.addColorStop(0, "blue");

O offset é um valor que varia de 0 a 1, representando o início e o fim do gradiente, respectivamente. A cor pode ser definida como uma string, um valor hexadecimal ou um valor em formato rgb/rgba.

Vamos aplicar o gradiente:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Exemplo de Gradiente</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="250"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");
      const gradient = context.createLinearGradient(50, 30, 150, 150);
      gradient.addColorStop(0, "blue"); // De azul
      gradient.addColorStop(1, "white"); // Para branco
      context.fillStyle = gradient; // Define o gradiente como cor de preenchimento
      context.fillRect(50, 30, 150, 150);
      context.strokeRect(50, 30, 150, 150);
    </script>
  </body>
</html>

Neste exemplo, foram adicionados dois pontos de cor para criar o gradiente, um para a cor azul e outro para a cor branca. O resultado será uma transição suave de azul para branco:

Gradiente linear no canvas em JavaScript

Vale destacar que é possível adicionar mais de dois pontos de cor para criar gradientes mais complexos:

gradient.addColorStop(0, "blue"); // Início em azul
gradient.addColorStop(0.5, "green"); // Meio em verde
gradient.addColorStop(1, "white"); // Fim em branco

No exemplo acima, temos um gradiente linear diagonal. Ao ajustar as coordenadas, é possível criar gradientes horizontais ou verticais.

Quando as coordenadas x do ponto inicial e do ponto final são iguais, criamos um gradiente vertical:

const gradient = context.createLinearGradient(50, 30, 50, 150);

Gradiente linear horizontal no canvas em JavaScript

Da mesma forma, quando as coordenadas y do ponto inicial e do ponto final são iguais, obtemos um gradiente horizontal:

const gradient = context.createLinearGradient(50, 30, 150, 30);

Gradiente linear vertical no canvas em JavaScript

Gradiente Radial

O gradiente radial é criado com o método createRadialGradient(x0, y0, r0, x1, y1, r1), que recebe os seguintes parâmetros:

x0 e y0: coordenadas do centro do primeiro círculo
r0: raio do primeiro círculo
x1 e y1: coordenadas do centro do segundo círculo
r1: raio do segundo círculo

Por exemplo:

const gradient = context.createRadialGradient(120, 100, 100, 120, 100, 30);

Assim como no gradiente linear, precisamos definir pontos de cor para o gradiente radial usando o método addColorStop():

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const gradient = context.createRadialGradient(120, 100, 100, 120, 100, 30);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "white");
context.fillStyle = gradient;
context.fillRect(50, 30, 150, 150);
context.strokeRect(50, 30, 150, 150);

Gradiente radial no canvas em JavaScript