Se você ainda não sabe o que é a tela, pode conferir o artigo anterior.
Ao aprender a desenhar, as linhas são as mais básicas e a conexão das linhas pode formar qualquer forma. O mesmo acontece na tela.
Antes de começarmos, retiramos a tela e os pincéis:
var cvs = document.getElementById ('cvs'); //Tela
var ctx = cvs.getContext ('2d'); // Escovar
Quando desenhamos, o ponto da caneta não é fixo e muda a qualquer momento. Embora a tela não determine o ponto de escrita através das mãos, também há um método, que é o Moveto. Moveto é equivalente a levantar a ponta da caneta da tela e movê -la para o ponto especificado (ou seja, coordenadas).
ctx.moveto (x, y)
Nenhum gráfico é desenhado durante esse processo, o que equivale a balançar a tela com a caneta.
Mas é inútil influenciar, temos que começar a desenhar. Desenhe o mais simples: linhas retas
O método de desenhar uma linha reta é Lineto. Seus parâmetros são os mesmos que o Moveto e ambos são o mesmo ponto.
CTX.LINETO (X, Y) É claro que, quando você desenha uma linha, o ponto da caneta também se move; portanto, depois de Lineto, o ponto da caneta se torna seu ponto alvo.
ctx.moveto (100.100);
ctx.lineto (200.100);
Neste momento, você atualiza a página da web e descobrirá que não há linha esperada na tela e nada. Porque temos um passo a menos. O lineto é na verdade um caminho desenhado e é invisível por si só. Se queremos que ele mostre, devemos desenhá -lo.
Os alunos que usaram o PS definitivamente conhecerão os dois modos dos gráficos, um está preenchendo e o outro é o golpe. Agora, desenhamos uma linha, o que é equivalente a desenhar um caminho no PS. Neste momento, podemos desenhar as bordas do caminho e a figura será exibida.
O método de acidente vascular cerebral é o golpe (). Agora vamos completar o código:
ctx.moveto (100.100);
ctx.lineto (200.100);
ctx.stroke (); atualize neste momento e você pode ver uma linha. Obviamente, você também pode desenhar centenas de caminhos em sucessão e, em seguida, executar ações de acidente vascular cerebral para desenhar centenas de linhas de uma só vez. Agora vamos desenhar um retângulo com 4 linhas:
ctx.moveto (100.100);
ctx.lineto (200.100);
ctx.lineto (200.200);
ctx.lineto (100.200);
ctx.lineto (100.100);
ctx.stroke ();
Aqui, primeiro desenhamos todos os caminhos e depois os acariciamos um após o outro.
- A queixa do autor: uma das coisas ruins sobre o desenho de tela é que ele basicamente depende da adivinhação, e não é intuitivo.
Dica séria: o processo de desenho de tela (ou seja, preenchimento e golpe) é muito consumido por recursos. Se você deseja salvar os recursos do sistema e melhorar a eficiência, é melhor desenhar todos os caminhos e preencher ou acariciar a figura de uma só vez.
A partir da figura acima, podemos ver que a espessura da linha padrão é 1px, enquanto a cor da linha é preta. É claro que podemos defini -los, mas o estranho é que a largura da linha é a largura da linha, enquanto o estilo de linha é chamado Strokestyle. Por que não linheiro? Eu também não sei. :
ctx.LineWidth = 10;
ctx.strokestyle = 'rgba (255,0,0,0,5)';
O código acima define a largura da linha para 10px e a cor da linha se torna vermelho translúcido.
Como mostra a Figura 1, atualize -o, parece que algo está errado! Por que parece que um pequeno pedaço está faltando no canto superior esquerdo? Isso não é uma ilusão. O motivo começa com a maneira como o desenho de linha de tela.
Pergunta: Se o caminho do retângulo que eu desenho tiver 100 de largura e altura e minha largura da linha de borda é 10px, qual é a largura e a altura geral desse retângulo com a borda desenhada? É 100+10*2 = 120?
Se a borda estiver completamente desenhada fora do caminho, é 120. Mas a tela não é. As linhas na tela têm uma linha média, localizada no meio absoluto da linha, e os golpes da linha se estendem a ambos os lados com a linha média. Por exemplo, se a largura da sua linha for 1, a linha central será de 0,5; Se a largura for 5, a linha central estará em 2,5. Quando a figura da tela é acariciada, o caminho se encaixa na linha média da linha e depois acaricia. Como mostrado na Figura 2:
Portanto, quando acariciado, metade da linha fica do lado de fora e a metade está no interior, ou seja, a largura geral do retângulo superior é de mais de 100 (10/2)*2, o que é igual a 110.
É precisamente por esse motivo que é natural ter um canto ausente no canto superior esquerdo. Porque ninguém o pintou aqui.
Mas por que não há lacunas nos cantos restantes? Olhe para a sua foto, não há lacunas nos quatro cantos?
Isso porque eu não levantei o pincel durante o desenho das linhas, e os pincéis eram contínuos, ou seja, não o mova antes. Se você não acredita, vamos moveto agora:
ctx.moveto (100.100);
ctx.lineto (200.100);
ctx.moveto (200.100); // Nota aqui
ctx.lineto (200.200);
ctx.lineto (100.200);
ctx.lineto (100.100);
ctx.LineWidth = 10;
ctx.strokestyle = 'rgba (255,0,0,0,5)';
ctx.stroke ();
Nós nos mudamos antes de desenhar a segunda linha, e as coordenadas do moveto não mudaram, e ainda é o mesmo ponto, mas após a refrescante, a figura se torna assim [Figura 3]:
Entendido? Porque levantamos a caneta.
Agora, vamos excluir o Moveto, não se preocupe com isso, vamos pensar em como preencher o canto que falta no canto superior esquerdo?
Primeiro, deixe -me fazer uma pergunta, nosso caminho está fechado? Isso não é um absurdo? Já não voltamos o caminho de volta à origem? Claro que está fechado!
errado! Isso apenas faz com que o último ponto do caminho se sobreponha ao ponto de partida, mas o caminho em si não está fechado!
Como fechar o caminho na tela? Use closepath ().
ctx.moveto (100.100);
ctx.lineto (200.100);
ctx.lineto (200.200);
ctx.lineto (100.200);
ctx.lineto (100.100);
ctx.closePath (); // Caminho próximo
ctx.LineWidth = 10;
ctx.strokestyle = 'rgba (255,0,0,0,5)';
ctx.stroke ();
Refrescante neste momento fará de você um quadrado perfeito. Figura 4:
Não importa a espessura que mudemos as linhas - quanto mais espessa, mais pessoas gostam delas, certo? -Os quatro cantos deste quadrado são ângulos retos regulares e não serão suaves. Qual é o caso com um canto suave? Por favor, veja o golpe quadrado no PS, Figura 5:
Eu vi isso. Quanto mais espessa a borda, maior o arco de seu angular.
Se eu acho que as linhas de borda na tela são as mesmas do PS, existe alguma maneira? Obviamente, há o atributo Linejoin.
Linejoin, que significa a interseção de linhas, possui 3 propriedades: Mitre (padrão, canto nítido), chanfro (chanfro) e redondo (redondo), como mostra a Figura 6:
Não há dúvida de que podemos entender que nosso retângulo usa cantos nítidos, então tente alterá -lo para cantos arredondados:
Os gráficos se tornaram assim, Figura 7:
É um pouco como PS, certo?
Além disso, da imagem anterior, aprendemos que as duas extremidades da linha de tela são planas, pode ser alterada? Afinal, não é bonito.
Também é possível, ou seja, a propriedade LineCap, que é o ponto final que define a linha. O LineCap possui 3 valores: Butt (Plano, Padrão), redondo (círculo), quadrado (quadrado), como mostrado na Figura 8
Você pode descobrir que a cabeça plana é realmente a mesma que a cabeça quadrada, a única diferença é que a cabeça plana não está esticada. A cabeça redonda e a cabeça quadrada são esticadas em uma peça. Quanto tempo dura esta seção? Isso é metade da largura da linha.
Você já pensou em alguma coisa? Haha, o problema anterior do caminho fechado, se definirmos LineCap como cabeçalho quadrado, o efeito será o mesmo!
Mas, para estar do lado seguro, ainda temos que fechar o caminho, lembre -se!
Eu também quero lembrá -lo: o caminho fechado não tem pontos de extremidade! Portanto, o estilo do terminal não é visível no caminho fechado.
Além disso : LineCap é um pouco semelhante ao Linejoin, tome cuidado para não mexer.Se você tem olhos afiados e tem azar, pode achar que às vezes as linhas de 1 pixel não têm 1 pixel de largura, mas parecem mais largas e embaçadas. Como mostrado na Figura 9:
Parabéns! Você encontrou um bug que não era um bug. Isso é muito especial, eu o colocarei no próximo artigo