Índice
As Curvas de Bézier, São um tipo de curvas amplamente utilizadas em programas de desenho e gráficos, pois permitem gerar curvas com alguns pontos do plano, graças a isso com algumas fórmulas matemáticas podemos obter curvas suaves ou mais exatas, que podemos usar para dar você mais detalhes para nossos gráficos.Em HTML5 temos a possibilidade de implementar o Curvas de Bézier Graças a vários métodos, podemos incluir curvas quadráticas e cúbicas, a limitação é que na tela não temos um suporte visual de onde temos os pontos de referência.
Métodos para gerar as curvas
Como já explicamos, as curvas de Bézier estão apoiadas em alguns pontos para podermos fazer o desenho, para chegarmos à curva desejada devemos fazer vários experimentos, porém para experimentar devemos primeiro conhecer o fundo, então a seguir vamos ver as informações correspondentes com os métodos que nos permitem desenhar essas curvas:
bezierCurveTo (cx1, cy1, cx2, cy2, x, y): Desenhe uma curva de Bezier do tipo cúbico onde os pontos (x, y) se encontram usando os pontos de controle (cx1, cy1) e (cx2, cy2).
quadraticCurveTo (cx, xy, x, y): Desenhe uma curva de Bezier quadrática para os pontos (x, y) com o ponto de controle (cx, cy).
Já conhecemos o aspecto técnico com que devemos trabalhar, agora vamos ver um exemplo em código.
Neste exemplo, vamos desenhar uma curva de Bézier cúbica, onde vamos tomar a última como ponto de partida subcaminho e, em seguida, leve-o aos pontos dos dois últimos argumentos que o método recebe; além disso, inclui uma funcionalidade que, se pressionarmos a tecla shift ou ctrl em nosso teclado, os pontos inicial e final da curva mudam.
Exemplo Seu navegador não suporta o elemento tela de pintura Assim que tivermos o código, vamos ver o que ele gera no navegador, limitamos isso por conter uma seção dinâmica, os resultados podem variar:
Com isso terminamos este tutorial sobre curvas de Bézier, o fundamental é a experimentação se quisermos obter efeitos mais complexos que estão anexados ao que precisamos.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
