Resumo de aprendizagem do Canvas três: caminhos de desenho - segmentos de linha

Alguns métodos de desenho no ambiente de desenho Canvas são métodos de desenho imediatos e alguns métodos de desenho são baseados em caminho.

Existem apenas dois métodos para desenhar gráficos imediatamente: StrokeRect() e fillRect() Embora os métodos StrokezText() e fillText() também sejam desenhados imediatamente, o texto não é considerado um gráfico.

A maioria dos sistemas de desenho, como: SVG (Scalable Verctor Graphics, gráficos vetoriais escaláveis), Adobe Illustrator, etc., são baseados em caminhos.

Ao usar esses sistemas de desenho, você precisa primeiro definir um caminho e, em seguida, traçá-lo ou preenchê-lo, ou pode traçá-lo e preenchê-lo para que a forma possa ser exibida.

Três métodos de desenho no Canvas:

No ambiente de desenho Canvas, os segmentos de linha também são desenhados com base em caminhos, chamados de caminhos lineares. Os métodos para criar caminhos lineares são: moveTO() e lineTo() Somente chamando o método stroke() após criar o caminho a linha. segmentos sejam desenhados no Canvas.

Este é o método de desenho baseado em caminho que mencionamos anteriormente, que deve ser traçado ou preenchido;

Normalmente, dois pontos são conectados por uma linha, portanto, desenhar um segmento de linha é muito simples. Especifique o ponto inicial da linha por meio de moveTO() e mova para outro ponto por meio de lineTo().

 função drawLine(){cxt.moveTo(50, 50);}

No entanto, não podemos ver os segmentos de linha na tela. Mencionamos anteriormente que o método de desenho baseado em caminho deve ser traçado ou preenchido. Então, para ver o resultado, devemos usar também o método stroke().

Portanto, modificamos o método para o seguinte para que um segmento de linha seja desenhado

 função drawLine(){cxt.moveTo(50, 50);}

Também podemos desenhar segmentos de linha na tela usando apenas lineTo(). Alteramos o código acima para conforme mostrado abaixo e o efeito é o mesmo.

 função drawLine(){cxt.lineTo(50, 50);}

Resuma o uso de moveTo() e lineTo()

• moveTo(x,y): Mova o traço para as coordenadas x e y especificadas, adicionando um subcaminho ao caminho atual. Este método não limpará nenhum subcaminho no caminho atual.
• lineTo (x, y): Desenha uma linha reta da posição atual até a posição x e y especificada. Se não houver subcaminhos no caminho atual, então este método se comporta da mesma forma que moveTo(). Se houver um subcaminho no caminho atual, este método adicionará o ponto especificado ao subcaminho.

Alterar a largura de um segmento de linha

 função= 14; cxt.lineTo(50, 50);

 função drawLine(){ cxt.lineWidth = 14; cxt.strokeStyle = 'verde';

Também podemos usar o objeto CanvasGradient ou o objeto CanvasPattern para adicionar cores ou padrões gradientes a segmentos de linha.

 função drawLine(){ cxt.lineWidth = 14; var gradiente = cxt.createLinearGradient(0, 0, canvas.width/2, canvas.height/2); 0,5, 'roxo'); gradiente;cxt.lineTo(50, 50);

A partir dos três métodos de desenho na tela acima, podemos ver que o caminho do arco na segunda linha é um caminho aberto e o caminho do arco na última linha é um caminho fechado. Então, como se consegue um caminho fechado?

Vamos dar uma olhada em dois dos métodos mais importantes de desenho de caminhos no canvas.

• BeginPath(): Limpa todos os subcaminhos atuais para redefinir o caminho atual e replanejar um caminho.
• closePath(): usado para fechar um caminho aberto. Não é necessário se o gráfico já estiver fechado, ou seja, o ponto atual é o ponto inicial, esta função não faz nada.

Primeiro desenhe uma polilinha

 função drawLine(){ cxt.strokeStyle = 'verde'; );}

Modifique o código no exemplo acima e adicione os métodos BeginPath() e closePath() ao código.

 function drawLine(){ //Traço triângulo cxt.strokeStyle = 'verde'; (); cxt.beginPath(); cxt.lineTo(150, 250); cxt.stroke();

Pode-se ver que traçamos dois caminhos na tela

Nota: Depois de chamar BeginPath(), ou quando o canvas é criado pela primeira vez, o primeiro comando de construção de caminho é geralmente considerado como moveTo(). Portanto, devemos usar o beginPath() primeiro ao desenhar gráficos.

Vamos continuar modificando nosso código

 function drawLine(){ //Traçar triângulo cxt.strokeStyle = 'verde'; (150, 150); //Polyline cxt.translate(150, 0); cxt.strokeStyle = 'red'; cxt.lineWidth = 2; cxt.lineTo(150, 150); cxt.closePath(); //Triângulo preenchido com verde cxt.translate(150, 0); cxt.fillStyle = 'green'; .lineTo(50, 150); cxt.fill(); cxt.closePath(); //Triângulo preenchido em vermelho cxt.beginPath(); 50, 50); 150);cxt.closePath();

No exemplo acima, podemos ver que as diferentes posições de closePath() também afetarão nossos gráficos.

Nota: Quando você chama a função fill(), todas as formas não fechadas serão fechadas automaticamente, portanto a função closePath() não é necessária neste momento.

Mas chamando acidente vascular cerebral(): Se você usar closePath() apenas antes do método acidente vascular cerebral(), um caminho fechado será formado. Se você chamar o método closePath() após o método acidente vascular cerebral(), os gráficos foram desenhados e o atual. o caminho do desenho foi fechado, então o método closePath() não funciona.

Vejamos um exemplo primeiro

 function drawLine(){ //Traço triângulo cxt.lineWidth = 1; cxt.beginPath(); ;cxt.moveTo(50,5, 150,5); cxt.lineTo(450,5, 150,5);

Podemos ver na imagem que definimos a largura da linha de ambos os segmentos de linha para 1 pixel, mas o segmento de linha acima desenha dois pixels.

Se você desenhar um segmento de linha com 1 pixel de largura no limite de certos 2 pixels, o segmento de linha ocupará na verdade 2 pixels de largura;

Porque quando você desenha um segmento de linha vertical de 1 pixel de largura em uma borda de pixel, o objeto do ambiente de desenho da tela tentará desenhar meio pixel à direita da linha central da borda e o outro meio pixel à esquerda da borda linha central.

No entanto, não é possível desenhar um segmento de linha com meio pixel de largura dentro de um pixel completo; portanto, meio pixel em ambas as direções é expandido para 1 pixel.

Por outro lado, o desenho é entre dois pixels, de modo que os meios pixels nas extremidades esquerda e direita da linha central não se estenderão e combinados ocuparão exatamente a largura de 1 pixel. Portanto, se você deseja desenhar um segmento de linha com realmente 1 pixel de largura, você deve desenhar o segmento de linha entre dois pixels

Agora que entendemos como desenhar um segmento de linha verdadeiro de 1 pixel, vamos começar a desenhar a grade

 function drawLine(stepx, stepy){ cxt.lineWidth = 0.5; cxt.strokeStyle = 'green' //Desenhe uma linha vertical for(var i= stepx + 0.5; i< cxt.canvas.width; i+= stepx){ cxt.beginPath();cxt.moveTo(i, 0); cxt.canvas.height); cxt.stroke(); //Desenhe uma linha horizontal for(var i= stepy + 0.5; i< cxt.canvas.height; i+= stepy){ cxt.beginPath(); moveTo (0, i); }}drawLine(10, 10);

No exemplo acima, desenhamos o segmento de linha no pixel entre dois pixels, e o segmento de linha desenhado tem apenas 0,5 pixels de largura.

Embora a especificação do canvas não estipule isso explicitamente, todas as implementações do navegador Canvas usam tecnologia anti-aliasing para criar efeitos de desenho de segmento de linha subpixel.

Esta seção explica principalmente o método de desenho de caminhos lineares na tela, usando principalmente moveTo() para definir o ponto inicial, lineTo() para definir o ponto final e Stroke() para desenhar o caminho atual. Esses três métodos desenham segmentos de linha

Existem dois métodos importantes para desenhar caminhos no canvas, beginPath() e closePath(). Chamar BeginPath() antes de desenhar gráficos é uma etapa necessária para desenhar vários gráficos.

closePath() pode ser omitido ao usar fill(), e você também deve prestar atenção à posição de chamada do método closePath().

Ao desenhar um segmento de linha, podemos usar lineWidth para alterar a largura do segmento de linha e strokeStyle para alterar a cor do segmento de linha.

Descubra os limites de pixel do segmento de linha para que possamos desenhar uma largura de linha real de 1 pixel.

Alunos interessados ​​​​em desenhar gráficos em tela, continuem prestando atenção nas atualizações subsequentes. Se houver algo errado, aponte e comunique mais.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.