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.
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:
Recuerda que el inicio se define con moveTo
.
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:
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Hoy vamos a ver programar la impresión de un PDF generado a partir de HTML…
En este tutorial básico de JavaScript con HTML vamos a ver cómo llenar una lista…
En este artículo se presenta una guía para imprimir un PDF a partir de una…
En este post voy a enseñarte cómo imprimir un PDF a partir de su representación…
Esta web usa cookies.