Já aprendemos a desenhar algumas linhas no Canvas, então neste artigo vou mostrar como conectar essas linhas para criar desenhos muito mais vívidos.

1. Conecte várias linhas no Canvas

Como sabemos no Canvas, usamos a função beginPath() para declarar o início do desenho de uma nova forma. Portanto, para conectar várias linhas, declaramos apenas uma vez primeiro e, em seguida, contamos com a sintaxe de cada linha para determinar os pontos de desenho.

Exemplo : Desenhe uma figura como esta

Primeiro analisamos essa figura da seguinte forma:

Então vamos usar duas linhas, uma quadrática e uma linha de Benzier.

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(100, 20); // line 1 context.lineTo(200, 160); // quadratic curve context.quadraticCurveTo(230, 200, 250, 120); // bezier curve context.bezierCurveTo(290, -40, 300, 200, 400, 150); // line 2 context.lineTo(500, 90); context.lineWidth = 5; context.strokeStyle = 'blue'; context.stroke();

2. Propriedade de junção de linha no Canvas

No Canvas, existe uma propriedade lineJoin que nos ajuda a escolher como unir duas linhas ( interseção ). Ele tem três maneiras de se conectar da seguinte forma:

• mitra : fazer um ângulo agudo
• redondo : cantos arredondados
• bisel : arredondado para um canto afiado, mas perdeu a parte superior

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // set line width for all lines context.lineWidth = 25; context.strokeStyle = 'blue'; // miter line join (left) context.beginPath(); context.moveTo(99, 150); context.lineTo(149, 50); context.lineTo(199, 150); context.lineJoin = 'miter'; context.stroke(); // round line join (middle) context.beginPath(); context.moveTo(239, 150); context.lineTo(289, 50); context.lineTo(339, 150); context.lineJoin = 'round'; context.stroke(); // bevel line join (right) context.beginPath(); context.moveTo(379, 150); context.lineTo(429, 50); context.lineTo(479, 150); context.lineJoin = 'bevel'; context.stroke();

3. Função ArcTo() no Canvas

A função arcTo() é usada para criar um arco no Canvas com um determinado ponto de partida, ou seja, é usada para conectar uma determinada linha ( é claro que essa linha já tem um ponto final e esse ponto também é o ponto). de arcTo() ).

Sintaxe : context.arcTo(x1, y1, x2, y2, r);

Em que :

• x1 : x posição do ponto de controle
• y1 : posição y do ponto de controle
• x2 : x posição do ponto final
• y2 : posição y do ponto final
• r : raio do arco ( raio ).

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); // Vẽ 1 đường thẳng ctx.moveTo(20, 20); ctx.lineTo(100, 20); // Nôi tiếp là một đường cung ctx.arcTo(150, 20, 150, 70, 50); // Tiếp theo là một đường thẳng ctx.lineTo(150, 120); ctx.stroke(); <br><br><br><br><br><br><br><br><br><br><br><br><br>

4. Conclusão

Nesta lição, aprendemos algumas maneiras de unir linhas para formar uma variedade de linhas, combinando essas maneiras, você criará desenhos extremamente impressionantes. No entanto, trabalhar com o Canvas é muito difícil porque o cálculo de coordenadas é muito demorado e complicado.

Na próxima lição, aprenderemos a desenhar algumas formas especiais chamadas Shapes. Por exemplo, círculo, retângulo, semicírculo.