En este post te voy a mostrar un ejemplo de cómo dibujar o trazar una curva cuadrática de Bézier en un canvas de HTML5 usando JavaScript a través del método quadraticCurveTo.

Recuerda que una curva de Bézier tiene un inicio, un final y un punto de apoyo que define cómo será la curvatura.

Más adelante veremos el método que utiliza dos puntos de apoyo, igualmente con la curva de Bézier.

Curva cuadrática en Canvas

Para dibujar una curva, necesitamos situarnos en un punto del canvas; eso se consigue con el método moveTo, que indica el inicio de la curva.

Después se invoca al método quadraticCurveTo que toma los siguientes argumentos:

  • Coordenada X del punto de apoyo
  • Coordenada Y del punto de apoyo
  • Posición o coordenada X del final
  • Posición o coordenada Y del final

Recuerda que el inicio se define con moveTo.

Ejemplo de curva cuadrática con quadraticCurveTo

Veamos un ejemplo en donde se dibuja una curva con un punto de apoyo usando JavaScript y canvas:

El punto de apoyo o soporte tira o jala la curva; pero toda la curva depende de los 3 puntos, incluyendo el de inicio y el de fin.

El resultado es el siguiente:

 


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 3,477 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: