Criando Gradientes - JavaScript

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