Usando cores e gradientes com o Tag HTML5 Canvas

Quase todos os operação em HTML5 do lona

função implementa um estilo de preenchimento ou traçado. Para tirar o máximo proveito da tela, você precisa entender como eles funcionam. Os três principais tipos de estilos que você pode usar em preenchimentos e traçados são as cores, gradientes e padrões.

Aplicando cores com a tag canvas HTML5

Para especificar uma cor de preenchimento ou traçado no lona tag, você pode usar as mesmas ferramentas de cores que você usa em CSS e HTML:

  • valores hexadecimais de seis dígitos: O esquema hexadecimal de seis dígitos comumente usados ​​em CSS usa dois dígitos cada para vermelho, verde e azul. O valor começa com um sinal de libra. Por exemplo, # FF0000 é vermelho, e # FFFF00 é amarela.

  • valores hexadecimais de três dígitos: valores de cor Hex muitas vezes usam valores de repetição, para que possa abreviar esses valores como números de três dígitos. Neste esquema, o vermelho é # F00, e amarelo está # ff0.

  • nomes de cores: Muitas vezes é possível usar nomes de cores, como "vermelho" ou "amarelo". nomes de cores comum normalmente vai funcionar, mas nem todos os navegadores suportam a mesma lista de cor names- "papaya whip" não é susceptível de ser apoiada.

  • RGB e RGBA valores: Você pode usar o rgb () função para criar cores usando números inteiros (0-255) ou porcentagens (0% -100%). vermelho é RGB (255, 0, 0) e amarelo está RGB (100%, 100%, 0%). Note-se que o rgb função deve ir entre aspas como qualquer outro valor de cor. Se você quiser incluir alfa, adicionar um quarto parâmetro, que é um valor de zero e um. vermelho transparente seria rgba (255, 0, 0, 0,5).

  • HSL e HSLA: O novo hsl e HSLA formatos de cor é suposto ser suportada pelo lona elemento, mas, até agora, o suporte para esses recursos varia de acordo com browser.

Note-se que os vários valores para uma cor são sempre entre aspas. O parâmetro cor é uma cadeia que pode ser interpretado como uma cor CSS.

Aplicando gradientes com a tag canvas HTML5

Você também pode preencher uma forma com um gradiente. gradientes de lona são definidos em duas etapas:

  • Criar um objeto de inclinação. Existem dois métodos incorporados ao objeto de contexto para isso. Um constrói gradientes lineares, eo outro cria gradientes radiais.

  • Adicionar limites de cor. UMA interrupção de cor é um elemento especial que indica a cor a ser adicionada ao gradiente. Você pode adicionar tantas cores como você quer, e você também pode especificar onde ao longo do padrão de gradiente a cor aparece.

O código a seguir constrói um gradiente radial e um gradiente linear em uma lona:

draw function () {var desenho = document.getElementById ( "desenho") - var con = drawing.getContext ( "2d") - // construir um linear gradientlGrad = con.createLinearGradient (0,0,100,200) -lGrad.addColorStop (0 , "# FF0000") - lGrad.addColorStop (0,5, "# 00FF00") - lGrad.addColorStop (1, "# 0000FF") - con.fillStyle = lGrad-con.fillRect (0, 0, 100, 200) - // construir um radial gradientrGrad = con.createRadialGradient (150, 100,0, 150, 100, 100) -rGrad.addColorStop (0, "# FF0000") - rGrad.addColorStop (0,5, "# 00FF00") - rGrad.addColorStop (1, "# 0000FF") - con.fillStyle = rGrad-con.fillRect (100,0, 200, 200) -} // sorteio final

A saída desse código é mostrado aqui:

image0.jpg

UMA linear gradiente é um padrão de cores que se misturam uns aos outros ao longo de um caminho em linha reta. Para definir um gradiente linear, siga estes passos:

  1. Criar uma variável para manter o gradiente.

    Gradientes são um pouco mais complexo do que cores simples, então eles são armazenados em variáveis ​​para ser reutilizado.

  2. Construir o gradiente, usando o createLinearGradient () método do objecto de contexto para construir um gradiente linear.

  3. Defina o caminho de gradiente com o createLinearGradient () método.

    Espera-se quatro parâmetros que definem uma linha (x1, y1, x2, y2). As cores será perpendicular a esta linha, então se você quiser faixas de cores horizontais, desenhar uma linha vertical. Se você quiser bandas de cor verticais, desenhe uma linha horizontal. A linha normalmente ocupa toda a largura ou altura do elemento, mas não precisa. Se a linha é mais pequeno do que a imagem, a área em excesso será atribuído automaticamente a cor a partir da extremidade mais próxima do gradiente.

  4. Adicionar limites de cor.

    Gradientes não são muito divertido, sem cores. o addColorStop () método do objeto gradiente permite que você adicione uma cor para o gradiente. Cada parada cor tem dois parâmetros: posição e cor. A posição é um valor 0-1 indicando onde na linha de gradiente a cor deve ser posicionado. 0 é o começo, 1 é a extremidade, e valores intermédios estão no meio. O parâmetro de cor é um valor de texto que pode ser avaliada como uma cor CSS. No mínimo, é necessário definir dois limites de cor, um para o início e para um final.

  5. Aplique o gradiente como um padrão de preenchimento.

    Se você quiser usar o gradiente como um padrão de preenchimento, definir o contexto de fillStyle à variável gradiente que você acabou de criar. Todos os preenchimentos subsequentes será feito usando o padrão de gradiente (até o fillStyle é alterado para algo mais).

gradientes radiais são semelhantes. Ao invés de desenhar um gradiente em uma linha reta, eles desenhar uma série de faixas de cores circulares. A primeira cor é o centro do círculo, e a última cor define um raio exterior. Construindo um gradiente radial é muito semelhante à construção de um gradiente linear. A única diferença é a crio comando.

Use o console objeto de createRadialGradient () Método para construir um gradiente radial. Este comando, na verdade, leva seis parâmetros:

  • beginX: A posição X do ponto de partida. Isso é muitas vezes no centro da sua forma.

  • beginY: Junto com beginX, o que determina a posição de início de sua inclinação.

  • beginRadius: O raio do seu círculo central. Normalmente, isso é zero, mas você pode torná-lo maior, se você quer enfatizar a cor center mais.

  • FimX: Descreve a posição X do círculo final. Tipicamente, isto é o mesmo que beginX.

  • Endy: Junto com FimX, define a posição do círculo final. Se o início e círculos que terminam têm as mesmas posições, você vai ter um gradiente circular. Mudar a posição final para fazer o trecho gradiente em uma direção particular.

  • endRadius: O raio terminando define onde o último gradiente de cor será colocado. Os valores mais pequenos para este raio irá levar a um gradiente firmemente agrupados, e valores maiores irá espalhar ao longo do gradiente de uma área maior.

Uma vez que o gradiente é definido, o addColorStops () método funciona exatamente como ele faz para gradientes lineares. A variável criada através do addRadialGradient () comando é normalmente armazenado em uma variável, onde ela pode ser usada para a subsequente fillStyle () pedidos.

Semelhante

menu