Comentário: podemos usar o "caminho" para desenhar qualquer gráfico. O caminho é simplesmente uma série de pontos e as linhas que conectam esses pontos. Qualquer contexto de tela terá apenas um "caminho atual" e, quando context.Save () for chamado, o "caminho atual" não será salvo
original:? P = 371
Este artigo é traduzido de Steve Fulton e Jeff Fulton Html5 Canvas, capítulo 2, usando caminhos para criar linhas
Para tela HTML5, podemos usar caminhos para desenhar qualquer gráfico. O caminho é simplesmente uma série de pontos e as linhas que conectam esses pontos. Qualquer contexto de tela terá apenas um caminho atual e, quando o context.Save () for chamado, o caminho atual não será salvo.
O início e o fim do caminho
Chamar BeginPath () pode iniciar um caminho, ao mesmo tempo em que chama ClosePath () terminará o caminho. Se você conectar um ponto no caminho, essa conexão forma um sub -caminho. Se o último ponto no subspato estiver conectado ao seu primeiro ponto, consideramos que o subspato está fechado.
Desenho de linha
A operação de caminho mais básica consiste em comandos repetidos para os comandos moveto () e lineto (). Por exemplo, o exemplo a seguir:
função drawscreen () {
context.strokestyle = "preto";
context.LineWidth = 10;
context.LineCap = 'Square';
context.BeginPath ();
context.moveto (20, 0);
context.lineto (100, 0);
context.stroke ();
context.ClosePath ();
}
No exemplo acima, descrevemos um segmento de linha horizontal com uma largura de 10 pixels; Ao mesmo tempo, também definimos as propriedades LineCap e Strokestyle. Aqui está uma lista de algumas propriedades comumente usadas:
LineCap
O LineCap define o estilo nas duas extremidades do segmento de linha na tela e pode ser definido como um dos três valores a seguir:
bunda. Valor padrão; Adicione as bordas retas nas duas extremidades do segmento de linha.
redondo. Adicione uma tampa de linha semicircular em cada extremidade do segmento de linha. O diâmetro da tampa da linha é igual à largura do segmento de linha.
quadrado. Adicione as tampas da linha quadrada às duas extremidades do segmento de linha. O comprimento da tampa da linha é igual à largura do segmento de linha.
Linejoin
Linejoin define o padrão de canto na interseção de dois segmentos de linha. A seguir, são três valores opcionais:
mitra. Padrão; cria um canto afiado. Você pode limitar o comprimento dos ângulos nítidos definindo a propriedade Miterlimit - o Fitterlimit é a proporção máxima de comprimento de ângulo nítido e largura da linha, e o padrão é 10.
chanfro. Crie um chanfro.
redondo. Crie um canto arredondado.
Linha de linha
A largura da linha define a espessura da linha e o padrão é 1,0.
Strokestyle
Strokestyle define os estilos, como cores usadas para renderizar linhas.
Nota do tradutor: Quando o LineJoin está definido como miter, mas o comprimento do canto nítido excede o limite do Miterlimit, a tela exibirá o efeito do canto do chanfro.