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
PERGUNTA: Os caminhos não -elegantes podem ser preenchidos?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.
Cor do gradiente de preenchimento de telaNa 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.
Nota : O parâmetro posicional do addColorstop é sempre um número entre 0-1 e pode ser um número decimal de dois dígitos, representando uma porcentagem. Ele não pode receber parâmetros como '3px'.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.
Pergunta: A cor será preenchida antes do ponto de partida do gradiente e após o ponto final do gradiente? 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.