Curvas cuadráticas y de Bézier en Canvas

Algunos tipos de paths avanzados que podemos encontrar en el API de HTML5, es la creación de curvas cuadráticas y de bezier. A continuación se explica como poder dibujar esté tipo de curvas y como controlar sus puntos de control con el ratón.

Dibujando Curvas cuadráticas 

See the Pen Mover punto ancla curva cuadratica by Jesus Tepec (@JesusTepec) on CodePen.

Otro ejemplo con múltiples curvas.

See the Pen Curvas cuadráticas canvas by Jesus Tepec (@JesusTepec) on CodePen.

Dibujando curvas de Bézier

En el siguiente ejemplo se muestra una curva con 2 puntos de control  de los cuales solo uno se mueve con el puntero del ratón.

See the Pen Mover curva de bezier by Jesus Tepec (@JesusTepec) on CodePen.

Ejemplo con más de una curva.

See the Pen Curvas de bezier Canavas by Jesus Tepec (@JesusTepec) on CodePen.

--------------------

Anterior Siguiente