Como criar um gradiente (HTML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Formas e linhas não são limitadas às cores sólidas. Um gradiente usado na tela é realmente um tipo de valor de cor, portanto, você pode aplicá-lo às propriedades fillStyle e strokeStyle.

Os gradientes podem ser usados para produzir uma alteração direcional na intensidade ou na cor em uma imagem. Isto é útil para produzir imagens de fundo, indicando altitude em mapas ou em qualquer lugar onde você deseja adicionar luz e sombra para uma superfície.

Gradientes são uteis na dinamização de aplicativos da Web já que podem evitar o uso de imagens para obter esses efeitos além de minimizar a largura de banda e o tempo necessário para carregá-los. E como são produzidos de maneira programática, podem ser escalados e reutilizados facilmente.

Pré-requisitos

Este tópico presume que você é capaz de criar um aplicativo básico da Windows Store em JavaScript que use o modelo da Biblioteca do Windows para JavaScript. Para obter instruções sobre como criar o seu primeiro aplicativo da Windows Store em JavaScript, veja Criar seu primeiro aplicativo Web. Para obter instruções sobre como usar o modelo WinJS, veja Como obter e usar o kit de ferramentas WinJS.

Instruções

Etapa 1: Obter o contexto de renderização

Antes de desenhar uma imagem na tela e colorir essa imagem com um gradiente, precisamos obter o contexto de renderização do elemento da tela. O contexto de renderização é o local onde todos os métodos e propriedades de desenho são definidos.

1. Para aprimorar o desempenho do aplicativo da Windows Store em JavaScript, aguarde até que a página HTML seja carregada antes de executar o código JavaScript. Faça isso, posicionando o código que desenhará a imagem em uma função que é chamada após o carregamento da página.

   window.onload = drawGradient;   
   
   function drawGradient() {...
   

2. Use o getElementById para obter o nó do DOM (Document Object Model) e usar o método getContext para acessar o contexto de renderização.

   Há tipos diferentes de contextos de renderização que permitem que você desenhe de formas diferentes. Por exemplo, há um contexto 2-D para elementos gráficos 2-D e um contexto 3-D para elementos gráficos 3-D. Os exemplos neste tópico usam o contexto de renderização 2-D.

       // Get the canvas element and specify a 2d drawing context.
       var context = document.getElementById("canvas").getContext("2d");
   

Etapa 2: Criar o gradiente

Quando temos o contexto de renderização, podemos definir o gradiente. Há dois tipos de gradientes; linear ou reto, e radial ou circular.

Linear gradient

O método de gradiente linear usa quatro argumentos:

createLinearGradient(startX, startY, endX, endY)

O primeiro conjunto de dois argumentos são a posição x e y do início do gradiente, e o segundo conjunto de argumentos são a posição x e y do fim do gradiente.

• Gradiente linear vertical

  Neste exemplo, o método createLinearGradient é atribuído à variável myGradient. Isto será útil na próxima etapa quando adicionamos cores ao gradiente.

  var myGradient=context.createLinearGradient(0, 0, 200, 0);
  

  Para criar um gradiente linear vertical, onde o gradiente faz sombreamento de um lado a outro, as posições x e y do início do gradiente são definidas em 0 e 0, enquanto as posições x e y do fim são definidas em 200 e 0. Como os valores de y (o 2º e o 4º parâmetros) são ambos 0, o gradiente sombreia uniformemente da esquerda para direita.

  

• Gradiente horizontal

  Para criar um gradiente que sombreia da parte superior para inferior, mantenha os valores x (1º e 3º parâmetros) constantes, e os valores y (2º e 4º parâmetros) variáveis de 0 até o alto das telas.

  var myGradient=context.createLinearGradient(0, 0, 0, 100);
  

  

• Gradiente diagonal

  Você também pode criar gradientes ao longo de uma diagonal. Neste exemplo, ambos os valores x e y variam, defina-os em 200 e 100 respectivamente.

  var myGradient=context.createLinearGradient(0, 0, 200, 100);
  

  

Radial gradient

O método createRadialGradient usa seis argumentos:

createRadialGradient(startX, startY, startRadius, endX, endY, endRadius)

Onde os parâmetros são:

• startX e startY são as coordenadas x e y na tela para o círculo inicial.
• startRadius é o raio do círculo inicial.
• endX e endY são as coordenadas x e y na tela para o círculo final.
• endRadius é o raio do círculo final.

• Gradiente radial tradicional

  Para criar um gradiente radial "tradicional", onde a cor esmaece uniformemente de um círculo para o outro , é necessário definir as coordenadas x/y de ambos os círculos para o mesmo valor e ter certeza de que um dos círculos do gradiente é maior do que o outro.

  var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);
  

  

• Diferentes locais de início e fim

  No exemplo do gradiente radial anterior, as coordenadas x/y são as mesmas para ambos os locais de início e fim em 52 e 50, respectivamente e apenas o tamanho do raio para cada círculo aumentou, de 10 para 200. Isso centraliza o sombreamento do gradiente radial no centro do círculo.

  Ao mover os locais de início e fim para posições ainda mais distantes você vai acabar em um cone como gradiente estendido sobre a tela.

  var myGradient = context.createRadialGradient(32, 30, 5, 60, 60, 50);
  

  Neste exemplo, as coordenadas x/y do círculo do início são 32 e 30 com raio de 5. As coordenadas x/y do círculo do fim são 60 e 60 com raio maior de 50. Aqui está o resultado:

  

Etapa 3: Ajustar marcas de cores

Um gradiente possui dois ou mais métodos addColorStop:

addColorStop(offset, color)

Para adicionar uma marca de cor, você precisa especificar a cor a ser utilizada e sua posição de deslocamento ao longo do gradiente. As posições do gradiente podem estar em qualquer lugar entre 0, no início do gradiente, a 1, no fim do gradiente.

Em nosso exemplo, a var myGradient é usada para definir addColorStop de 0 a 1 para que o gradiente sombreie uniformemente do branco ao preto.

myGradient.addColorStop(0,"white");
myGradient.addColorStop(1,"black");

• Marcas de cores múltiplas

  Você pode usar marcas de cores múltiplas. Neste exemplo, um segundo addColorStop atribui uma marca de cor parcial sobre o gradiente:

    myGradient.addColorStop(0,"orange");
    myGradient.addColorStop(.5, "green");
    myGradient.addColorStop(1, "blue");
  

  Produzirá esse gradiente:

  

Etapa 4: Definir o estilo de preenchimento

Antes de desenhar o gradiente, o fillStyle deve ser configurado para myGradient.

context.fillStyle = myGradient;

Por último, o método fillRect é usado para desenhar a imagem:

context.fillRect(0, 0, 200, 100);

Exemplos completos

Gradiente linear

Este código JavaScript usa um elemento de tela para desenhar um retângulo e usa posteriormente um gradiente linear diagonal para o fillStyle do retângulo.

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");

    // Create a linear gradient.
    var myGradient=context.createLinearGradient(0, 0, 300, 100);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.
    context.fillStyle = myGradient;

    // Draw the rectangle.
    context.fillRect(0, 0, 200, 100);
}

Gradiente radial

Este código JavaScript usa um elemento de tela para desenhar um círculo e posteriormente um gradiente radial para o fillStyle do círculo.

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");
  
    // Create the radial gradient.
    var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.     
    context.fillStyle = myGradient;

    // Draw a circle.
    context.beginPath();
    context.arc(52, 50, 40, 0, Math.PI*2, true); 
    context.closePath();
    context.fill();
}

Folhas de Estilo em Cascata (CSS)

Trata-se de um exemplo de Folhas de estilos em cascata (CSS) que cria uma margem em cinza próximo de um elemento de tela.

/* Style the canvas element with a grey border. */
canvas { border: 1px solid #c3c3c3; }

Arquivo HTML

Esse arquivo HTML cria um elemento de tela e usa arquivos externos JavaScript e CSS.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="myJavascript.js"></script>
        <link Rel="stylesheet" Href="myStyle.css" Type="text/css">
    </head>
    <body>
        <canvas id="canvas" width="200" height="100" />
    </body>
</html>

Tópicos relacionados

Guia rápido: desenhando em uma tela

Otimizando o desempenho: código JavaScript