Método de implementação de como o canvas desenha segmentos de linha

Para aprender a tela, você deve primeiro saber como desenhar segmentos de linha e, em seguida, usar muitos segmentos de linha simples para realizar gráficos mais complexos. Por exemplo, gráficos comuns, gráficos de barras, gráficos de linhas, etc., são todos realizados por meio de segmentos de linha.

O conhecimento básico de canvas não é muito, sei principalmente desenhar segmentos de linha, gráficos, imagens, texto, etc. A tela pode ser desenhada no navegador ou imagens simples podem ser desenhadas no servidor do nó com a ajuda do node-canvas. Este artigo registra apenas o desenho no navegador. Quanto a como desenhar no lado do nó, você mesmo pode verificar as informações relevantes.

Para desenhar no navegador, primeiro defina o elemento canvas em HTML. A largura e a altura padrão são 300 * 150, que podem ser definidas por width e height . Observe que a largura e a altura do estilo do elemento canvas e a largura e a altura da tela de desenho não são a mesma coisa. Isso será discutido mais tarde.

 <canvas id=canvas> <p>O navegador atual não suporta canvas, atualize seu navegador</p></canvas>

Antes de desenhar, devemos primeiro obter o contexto do desenho 2D da tela atual e, posteriormente, desenhar operando o contexto.

 let canvas = document.querySelector('#canvas');if (!canvas) { throw new Error('can not find canvas element');}// Nota 2d. para webgl, você pode obter o contexto do desenho 3D let ctx = canvas.getContext('2d');

Nota: O trecho de código acima será ignorado nos exemplos subsequentes e ctx será usada diretamente para representar o contexto de desenho 2D da tela.

Vamos dar uma olhada no sistema de coordenadas no desenho 2D do canvas. O canto superior esquerdo do elemento canvas atual é a origem da coordenada (0,0), a direção horizontal à direita é a direção positiva do eixo X e a direção horizontal à direita é a direção positiva do eixo X. a direção vertical descendente é a direção positiva do eixo Y, conforme mostrado abaixo. Você pode operar o sistema de coordenadas por meio de translação, rotação e escala para obter algumas animações. Esta parte será explicada em detalhes na seção de conhecimento sobre animação.

Ao desenhar um segmento de linha simples, você geralmente define primeiro o estilo do segmento de linha, como cor, largura da linha, estilo do ponto final da linha, etc. Definimos o estilo de desenho global de ctx definindo strokeStyle , que pode ser rgba ou hexadecimal legal valor de cor ou objeto gradiente, etc. O código a seguir simplesmente desenha um segmento de linha vermelha com largura de 10 de (10,10) a (50,60).

 ctx.strokeStyle = 'vermelho';ctx.lineWidth = 10;ctx.moveTo(10, 10);ctx.lineTo(50, 60);ctx.stroke();

Vejamos primeiro os métodos e propriedades relacionados ao desenho de segmentos de linha.

Propriedades relacionadas:

• lineCap, este valor informa ao navegador como desenhar as extremidades do segmento de linha. O valor opcional é um dos três seguintes: topo, redondo, quadrado. O padrão é bunda.
• lineWidth, esse valor determina a largura em pixels do segmento de linha. Deve ser não negativo, não infinito, o padrão é 1,0.
• lineJoin determina como desenhar o foco quando dois segmentos de linha se cruzam. Ele só terá efeito quando os dois segmentos de linha tiverem direções diferentes. Valores possíveis: bisel, redondo, esquadria. O valor padrão é mitra.
• miterLimit, informa ao navegador como desenhar o foco do segmento de linha na forma de mitra. Só é válido quando lineJoin='miter', e o padrão é 10.0.
• lineDashOffset, define o deslocamento do traço, o padrão é 0,0.

Métodos relacionados:

• BeginPath limpa todos os subcaminhos no caminho atual para redefinir o caminho atual. Geralmente, deve ser chamado primeiro ao desenhar uma forma fechada.
• closePath, exibe um caminho fechado. Este método é usado para caminhos de arco fechado e caminhos abertos criados a partir de curvas ou segmentos de linha.
• moveTo, move o ponto de desenho atual para as coordenadas especificadas.
• lineTo desenha um segmento de linha do ponto anterior até o ponto de coordenada especificado.
• setLineDash, um método usado para definir uma linha tracejada O parâmetro é uma matriz que indica o comprimento da linha sólida desenhada e o comprimento do espaço entre as linhas sólidas.

Tente definir diferentes valores lineCap para desenhar o mesmo segmento de linha

 ctx.lineWidth = 10;ctx.textAlign = 'center';deixe cores = ['vermelho', 'verde', 'azul'];deixe lineCaps = ['bunda', 'redondo', 'quadrado'];for ( let [index, lc] of lineCaps.entries()) { ctx.strokeStyle = cores[index] //Definir a cor do segmento de linha ctx.lineCap = lc; ctx.beginPath(); // Limpa o caminho atual ctx.moveTo(10, 20 + 20 * index(50, 20 + 20 * index); 80, 25 + 20 * índice);}

Como pode ser visto nos resultados da figura acima, quando lineCap é definido como redondo e quadrado, extremidades de um determinado comprimento serão adicionadas a ambas as extremidades do segmento de linha original, exceto que redondo é um estilo de arco e quadrado é um estilo retangular. estilo. Uma coisa a notar é que apenas um caminho atual pode existir no contexto de desenho da tela ao mesmo tempo. Para desenhar diferentes segmentos de linha, beginPath() deve ser chamado antes de cada desenho para limpar a rota atual e iniciar um novo caminho.

Vamos tentar usar diferentes valores lineJoin para desenhar os estilos no foco dos dois segmentos de linha.

 ctx.lineWidth = 20;ctx.textAlign = 'center';ctx.lineCap = 'butt';deixe cores = ['vermelho', 'verde', 'azul'];deixe lineJoins = ['chanfro', 'redondo' , 'miter'];for (let [índice, lj] de lineJoins.entries()) { ctx.strokeStyle = cores[índice]; //Definir a cor do segmento de linha ctx.lineJoin = lj; //Definir lineJoin ctx.beginPath(); //Limpar o caminho atual ctx.moveTo(10 + 80 * index, 20); 80 * índice, 20); ctx.fillText(lj, 40 + 80 * índice, 80);}

Pode-se observar que os três tipos lineJoin são diferentes no processamento do foco dos dois segmentos de linha. Entre eles, ao definir lineJoin=miter , a proporção máxima entre o comprimento da linha de esquadria e a metade da largura da linha pode ser definida definindo o atributo miterLimit . Quando essa proporção for excedida, lineJoin adotará o método bevel.

A tela não pode apenas desenhar linhas sólidas, mas também linhas pontilhadas. Desenhe uma linha pontilhada definindo a propriedade lineDashOffset e chamando setLineDash() .

 ctx.lineWidth = 10;ctx.textAlign = 'center';ctx.setLineDash([8, 8]); //Representa 8 pixels na parte da linha sólida e 8 pixels na parte do espaço let cores = ['vermelho', 'verde', 'azul'];let lineDashOffsets = [1, 2, 4];for (deixe [index, ldOffset] de lineDashOffsets.entries()) { ctx.strokeStyle = cores[index]; //Cor do segmento de linha ctx.lineDashOffset = ldOffset; //O deslocamento é definido ctx.beginPath(); 100, 20 + 20 * índice); ctx.fillText(`lineDashOffset:${ldOffset}`, 160, 25 + 20 * índice);}

Como você pode ver na imagem, lineDashOffset é o deslocamento definido para começar a desenhar a linha pontilhada. O método setLineDash() aceita um parâmetro de array. Se o número de arrays for um número ímpar, ele copiará o elemento do array atual por padrão para torná-lo um número par. A partir do 0º elemento representa o comprimento da parte da linha sólida, o 1º elemento representa o comprimento da parte do gap, o 2º elemento representa o comprimento da parte da linha sólida, o 3º elemento representa o comprimento da parte do gap, se atinge o último elemento do array, começará do zero novamente e assim por diante.

 ctx.lineWidth = 10;ctx.textAlign = 'center';deixe cores = ['vermelho', 'verde', 'azul', 'cinza'];deixe lineDashes = [[20, 20], [40, 40] , [20, 40], [20, 40, 20]];for (deixe [index, ld] de lineDashes.entries()) { ctx.strokeStyle = cores[index]; //Definir cor ctx.setLineDash(ld); //Definir lineDash ctx.beginPath(); + 20 * índice);ctx.stroke();ctx.fillText(`lineDashes:[${ld}]`, 240, 25 + 20 * índice);} 

 let lineDashOffset = 0; //Inicial lineDashOffsetctx.strokeStyle = 'green';function animate() { if (lineDashOffset > 25) { lineDashOffset = 0 } ctx.clearRect(0, 0, width, height); tela atual ctx.lineDashOffset = -lineDashOffset; //Definir lineDashOffset; ctx.setLineDash([4, 4]); //Defina o comprimento da linha sólida e o comprimento do intervalo ctx.rect(20, 20, 100, 100); //Adiciona o caminho atual à tela Stroke lineDashOffset += 1; //lineDashOffset offset mais 1 window.requestAnimationFrame(animate); //Use a taxa de quadros do navegador para executar repetidamente a função de animação}animate();

Ao desenhar um segmento de linha, você deve entender o conceito do caminho atual da tela. Em um determinado momento, existe apenas um caminho atual na tela. Ao iniciar um novo caminho, beginPath() deve ser chamado. Você pode definir o estilo de desenho dos segmentos de linha definindo lineWidth , lineCap e lineJoin . Ao traçar um segmento de linha, você pode definir a cor do segmento de linha por meio de strokeStyle .

Não apenas linhas sólidas podem ser desenhadas na tela, mas também linhas tracejadas podem ser desenhadas através de lineDashOffset e setLineDash() .

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.