Neste tutorial vamos aprender a desenhar uma linha no Canvas.

1. Desenhe Linhas na Tela

Uma linha reta terá as seguintes propriedades:

• Posição inicial, posição final.
• Largura da linha.
• Cor da linha
• Formate as duas extremidades da linha.

Desenhe uma linha reta:

Para desenhar uma linha temos que definir a posição inicial e a posição final, cada posição será determinada pela distância da margem esquerda e a distância da margem superior ( trái, trên ) .

 <canvas id="myCanvas" width="400" height="200"></canvas> <script> // Lấy đối tượng Canvas var canvas = document.getElementById('myCanvas'); // Chọn đối tượng vẽ 2D var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(490, 190); // Điểm kết thúc context.stroke(); // Tiến hành vẽ </script>

Nele temos :

• Use a função beginPath() para declarar uma nova linha
• Use a função moveTo(position) para especificar o ponto inicial.
• Use lineTo(position) para especificar o ponto final
• Use a função stroke() para prosseguir com o desenho.

Largura e cor da linha:

Para selecionar a largura da linha, usamos a propriedade lineWidth , para selecionar a cor usamos a propriedade strokeStyle .

 // Lấy đối tượng Canvas var canvas = document.getElementById('myCanvas'); // Chọn đối tượng vẽ 2D var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(380, 180); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'blue';// Màu xanh context.stroke(); // Tiến hành vẽ

Resultado:

Formate as duas extremidades da linha:

Formate as duas extremidades de uma linha reta, também conhecida como Line Cap.

Para formatar a linha Cap, usamos a propriedade lineCap e ela terá um dos três valores a seguir:

• bunda : perpendicular no ponto, tem dimensão normal
• round : arredondado, mais longo que o normal porque as duas extremidades adicionam um segmento arredondado.
• quadrado : placa retangular, mais longa que o normal devido às duas extremidades adicionais do segmento retangular.

 /*CANVAS THỨ NHẤT*/ var canvas = document.getElementById('myCanvas1'); var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(190, 10); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'blue';// Màu xanh context.lineCap = 'butt'; context.stroke(); // Tiến hành vẽ /*CANVAS THỨ HAI*/ var canvas = document.getElementById('myCanvas2'); var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(190, 10); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'pink';// Màu hồng context.lineCap = 'round'; context.stroke(); // Tiến hành vẽ /*CANVAS THỨ BA*/ var canvas = document.getElementById('myCanvas3'); var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(190, 10); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'red';// Màu đỏ context.lineCap = 'square'; context.stroke(); // Tiến hành vẽ

2. Desenhe linhas consecutivas no Canvas

Os exemplos acima apenas param no desenho de uma linha, mas você pode desenhar várias linhas em uma linha usando a função lineTo() .

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(390, 10); // Điểm giữa context.lineTo(20, 190); // Điểm giữa context.lineTo(390, 190); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'blue';// Màu xanh context.lineCap = 'butt'; context.stroke(); // Tiến hành vẽ

2. Conclusão

Então, para desenhar uma linha, devemos definir dois pontos nas duas extremidades da linha, cada linha terá algumas propriedades adicionais, como a largura da linha, a cor da linha e o formato das duas extremidades da linha.

Esta lição termina aqui, na próxima aprendemos a desenhar curvas.