Tutorial de desenho de lona HTML5 (4) - Caminhos não isolados e métodos de preenchimento de cores gradientes

Existem dois métodos gerais de desenho, ou seja, preencher e derrotar. O artigo anterior já falou sobre métodos de AVC. Este artigo falará sobre o método de preencher gráficos em tela.

Preench () é muito direto? E, assim como Strokestyle representa o estilo de golpe, o FillStyle representa o estilo de preenchimento.

ctx.fillstyle = 'color'; O estilo de preenchimento padrão é preto opaco

Pode. A tela se conectará diretamente ao ponto de partida a partir do ponto final do seu caminho atual e depois o preencherá. Como mostrado na imagem:

Mas você pode descobrir que o último parágrafo não tem golpes.

Lembro -me de que, em nosso artigo anterior, desenhamos um quadrado com 4 linhas, mas a tela não é tão ruim, e não há nem uma função para desenhar um retângulo diretamente. Você pode usar o FillRect () para preencher diretamente em um retângulo:

ctx.fillrect (x, y, largura, altura);

Aqui x e Y se referem às coordenadas do ponto de partida do canto superior esquerdo do retângulo, lembre -se.

Falando em Fillrect, temos que mencionar a Strokerect. Você adivinhou certo, significa acariciar diretamente um retângulo.

Também há o FillText e o STROKETEXT. Quanto à função, você pode ter adivinhado. Eu não vou falar sobre isso aqui, para que todos visualizem primeiro.

Na tela, as cores do gradiente também são divididas em dois tipos, a saber, gradiente linear e gradiente radial, e o método de criá -los também é independente. Vamos primeiro olhar como criar gradientes lineares.

Crie gradiente linear = createLineargradient - Olhe, ainda palavras muito diretas. Sua sintaxe é a seguinte:

CreateLinearGradient (X1, Y1, X2, Y2) possui 4 parâmetros! Parece tão complicado, mas na verdade isso é bastante simples, porque já dissemos que um ponto em um mundo plano é determinado pela coordenada X e pela coordenada Y. Portanto, X1, Y1 representa as coordenadas do ponto de partida de um gradiente linear e X2, Y2 representa as coordenadas do ponto final.

Os benefícios de fazer isso são óbvios e é conveniente se queremos criar um gradiente linear oblíquo. Mas vamos tentar criar um gradiente linear horizontal primeiro.

var linear = ctx.createlineargradiente (100.100.200.100); O gradiente parece ser criado, então podemos preenchê -lo? -Esse gradiente está vazio e não tem cor.

O método para adicionar cor à barra de gradiente é AddColorstop (posição, cor). Mas esteja ciente de que esse addcolorstop não é adicionado ao pincel, mas à variável que salva o gradiente na frente. Eu sou linear aqui.

var linear = ctx.createlineargradiente (100.100.200.100);

linear.addcolorstop (0, '#fff');

linear.addcolorstop (0,5, '#f0f');

linear.addcolorstop (1, '#333');

Eu usei 3 addcolorstops aqui, o que significa adicionar 3 cores à barra de gradiente.

Neste momento, podemos preencher a cor do gradiente, mas devemos primeiro atribuir o gradiente definido para encher o estilo.

var linear = ctx.createlineargradiente (100.100.200.100);

linear.addcolorstop (0, '#fff');

linear.addcolorstop (0,5, '#f0f');

linear.addcolorstop (1, '#333');

ctx.fillstyle = linear; // atribui gradiente para preencher o estilo

ctx.FillRect (100.100.100.100);

ctx.stroke ();

Observe que Fillrect e Strokerect desenham caminhos independentes. Por exemplo, no código acima, o AVC é chamado após o Fillrect, e o retângulo desenhado não será acariciado. O mesmo vale para a Strokerect.

Após o teste, encontrei um problema muito doloroso, ou seja, as coordenadas de gradientes lineares são relativas a toda a faixa de tela. Por exemplo, aqui, meu gradiente linear começa em 100.100. Se eu desenhar um retângulo a 0,0 e preencher -o com esse gradiente, descobrirei que não há preenchimento - porque o alcance do meu gradiente simplesmente excede o alcance do retângulo.

Esta é realmente uma configuração de golpe.

reunião. A cor antes do ponto de partida é a cor do ponto de partida e a cor após o ponto final é sempre a cor do ponto final.

Como encerrar a cor do ponto final, você pode preencher uma cor final transparente após a cor final. como:

linear.addcolorstop (0,99, '#333');

linear.addcolorstop (1, 'rgba (51,51,51,0)');

De acordo com o plano anterior, tentarei construir outro gradiente linear inclinado. Basta alterar os parâmetros do createLineargradiente.

var linear = ctx.createlineargradiente (100.100.200.200);

O efeito é mostrado na imagem:

Então, vamos tentar gradientes radiais (gradientes circulares). Semelhante ao CreateLinearGradient, o método de criação de gradientes radiais é: CreaterRadialGradient, mas seus parâmetros podem ser muito diferentes:

CRESTRADIALGRADIENTE (X1, Y1, R1, X2, Y2, R2) No qual X1, Y1, X2, Y2 ainda representa o ponto de partida e o ponto final, mas o ponto de partida e o ponto final aqui são um círculo e x, Y são as coordenadas do centro do círculo. Portanto, R1 e R2 são o raio do círculo do ponto de partida e o raio do círculo de pontos finais, respectivamente. Como mostrado na imagem:

Na minha impressão, parece que o gradiente radial é um círculo, o centro do círculo é o ponto de partida e o raio do círculo é o ponto final. Mas o gradiente radial na tela é realmente diferente. O ponto de partida é um círculo e o ponto final é um círculo, que é diferente do meu entendimento.

Vamos começar com o mais simples. Primeiro, faça um gradiente radial muito regular, ou seja, o centro do círculo de gradiente é o ponto de partida do gradiente. Devido ao gradiente radial regular, o centro é o centro do círculo, devemos tentar evitar distorções. Então, vamos sobrepor o centro do círculo final com o centro do círculo inicial?

var radial = ctx.CreamRadialGradient (55,55,10,55,55,55); // coordenadas centrais correspondentes

radial.addcolorstop (0, '#fff');

radial.addcolorstop (0,5, '#ff0');

radial.addcolorstop (0,9, '#555');

radial.addcolorstop (1, '#f00');

O círculo de ponto de partida do gradiente radial e as coordenadas do centro do círculo que eu defini aqui são as mesmas, enquanto o raio do círculo do ponto de partida é 10 e o raio do círculo de ponto final é de 55. A última faixa radial de gradiente desenhada é um círculo com uma largura e altura de 110, indicando que o gradiente é baseado na faixa do círculo de ponta.

(Você pode ver que ainda existe cor fora da faixa do círculo final, e essa cor é a cor final. No entanto, se você tentar usar radial.Addcolorstop (1.5, '#0f0'); para definir cores fora da faixa de gradiente, você ainda receberá um erro).

Então, qual é o uso do raio do círculo de ponto de partida? - O centro do gradiente radial normal (vamos chamá -lo de mudança de coração ...) é apenas um ponto, não um círculo. Na verdade, estamos certos. Esse círculo de ponto de partida é como um ponto, mas pode ser relativamente grande.

Vamos fazer o raio do círculo inicial muito grande, próximo ao raio do círculo final:

var radial = ctx.CreamRadialGradient (55,55,50,55,55,55); // muito perto

Os outros estrondos de cores permanecem inalterados e, em seguida, os gráficos se tornam assim.

Em outras palavras, a cor inicial do gradiente radial em tela é desenhada de fora da faixa do círculo de partida, e toda a cor do círculo de partida é a cor inicial.

Vamos definir o raio do círculo de ponto de partida para 0, e a mudança do centro de gradiente radial é realmente um ponto.

Na maioria das vezes, não precisamos de um gradiente radial muito formal, mas esperamos que sua mudança de coração seja compensada, semelhante à figura abaixo:

Neste momento, a vantagem dos dois círculos do gradiente radial da tela é lançado. Enquanto o centro do círculo de ponto de partida e o círculo de pontos finais não se sobrepor, a mudança de coração também mudará:

var radial = ctx.CreamRadialGradient (75,75,0,55,55,55); Mas a faixa de gradiente neste momento ainda é o alcance do círculo final.

Muitas pessoas nascem com uma mentalidade de destruição. Por exemplo, aqui, o raio do círculo final é sempre maior que o círculo inicial, mas o que acontece se eles forem revertidos?

var radial = ctx.CreamRadialGradient (75,75,55,55,55,0);

Após o teste, não haverá erros, mas o gradiente original de dentro para fora se transformou em um gradiente de fora para dentro. Esta é uma boa maneira de usá -lo.

Há outro problema. Se mudarmos o centro do círculo de partida e o alcance do círculo de partida excede o intervalo do círculo final,

O que acontece neste momento?

Ah! ? Qual é a situação? !

Essa situação ocorre quando o círculo de partida e o círculo final se sobrepõem apenas parcialmente. Portanto, se você precisar de gradientes radiais normais, verifique se um dos círculos inclui completamente o outro.

Além disso, como o gradiente pode ser atribuído ao FillStyle, ele também pode ser atribuído ao Strokestyle. Você conhece o efeito.