Além de desenhar linhas retas, o Canvas também pode desenhar curvas como arcos, curvas quadráticas e curvas de Benzier. Quanto a como desenhar uma linha reta, precisamos apenas determinar os pontos inicial e final, mas com curvas, existem alguns problemas para calcular antes de desenhá-la.

1. Desenhe um arco no Canvas

Para desenhar um arco, usamos a arc(x, y, radius, startAngle, endAngle, counterClockwise) , onde:

• x e y são os centros do arco
• radius é o raio
• startAngle é o ângulo inicial
• endAngle é o ângulo final
• counterClockwise sentido anti-horário está desenhando a direção ( no sentido horário ou anti-horário )

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // Xác đinh tâm là trọng tâm của Canvas var x = canvas.width / 2; var y = canvas.height / 2; // bán kính 75px var radius = 75; // Góc bắt đầu là 1.1PI var startAngle = 1.1 * Math.PI; // Góc kết thúc là 1.9PI var endAngle = 1.9 * Math.PI; // Cùng chiều kim đồng hồ var counterClockwise = false; // Vẽ đường cung context.beginPath(); context.arc(x, y, radius, startAngle, endAngle, counterClockwise); context.lineWidth = 15; // line color context.strokeStyle = 'black'; context.stroke();

2. Desenhe uma curva quadrática no Canvas

Para desenhar uma curva quadrática no Canvas, usamos o método quadraticCurveTo() , a curva quadrática é determinada por três pontos principais, incluindo:

• O ponto de partida ( ponto de contexto ).
• Ponto de controle (ponto de controle ).
• Ponto final ( ponto final ).

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(20, 20); // Điểm bắt đầu vẽ context.quadraticCurveTo(20, 100, 200, 20); //vẽ qua các điểm context.lineWidth = 1; // line color context.strokeStyle = 'black'; context.stroke();

• O ponto de partida é ( 20, 20 ) na função context.moveTo( 20, 20 ) .
• O ponto de controle é ( 20, 100 ) na função context.quadraticCurveTo( 20, 100 , 200, 20) .
• O ponto final é ( 200, 20 ) na função context.quadraticCurveTo(20, 100, 200, 20 ) .

A posição do vértice da curva é determinada pela linha que liga os pontos médios entre as duas linhas ( ponto de contexto, ponto de controle ) e ( ponto final, ponto de controle ).

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(188, 150); context.quadraticCurveTo(288, 0, 388, 150); context.lineWidth = 10; // line color context.strokeStyle = 'black'; context.stroke();

3. Desenhe uma curva de Benzier na tela

A curva de Benzier é definida por quatro pontos:

• O ponto de partida ( ponto de contexto )
• Ponto de controle um ( ponto de controle 1 )
• Ponto de controle dois ( ponto de controle 2 )
• Ponto final

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20, 20); ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); ctx.stroke();

A explicação no código é a seguinte:

• O ponto de partida é ( 20, 20 ) na função context.moveTo( 20, 20 ) .
• O ponto de controle 1 é ( 20, 100 ) na função context.quadraticCurveTo( 20, 100 , 200, 100, 200, 20) .
• O ponto de controle 2 é ( 200, 100 ) na função context.quadraticCurveTo(20, 100, 200, 100 , 200, 20) .
• O ponto final é ( 200, 20 ) na função context.quadraticCurveTo(20, 100, 200, 100, 200, 20 ) .

A questão é como determinar o vértice e a curvatura? Veja o exemplo abaixo.

 var canvas = document.getElementById('myCanvas');<br /> var context = canvas.getContext('2d');<br /> <br /> context.beginPath();<br /> context.moveTo(188, 130);<br /> context.bezierCurveTo(140, 10, 388, 10, 388, 170);<br /> context.lineWidth = 10;<br /> <br /> // line color<br /> context.strokeStyle = 'black';<br /> context.stroke();

4. Conclusão

Começando a achar difícil trabalhar com o Canvas já. Realmente, para desenhar boas imagens, você tem que calcular cada Pixel padrão, sem contar ter que usar conhecimentos matemáticos para determinar as coordenadas.

Na próxima lição, aprenderemos a desenhar uma linha usando as funções aprendidas nesta e nas lições anteriores.