javascript

Curva cuadrática de Bézier – Canvas en JavaScript

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:

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Curvas cuadráticas de Bézier en Canvas</title>
</head>

<body>
 <h1>Curvas cuadráticas de Bézier en Canvas usando JavaScript</h1>
 <a href="//parzibyte.me/blog">By Parzibyte</a>
 <br>
 <canvas id="canvas"></canvas>
 <script src="script.js"></script>
  </body>
</html>
/**
 * Ejercicios con Canvas y JavaScript: curvas cuadráticas
 * 
 * https://parzibyte.me/blog
 */const ALTURA_CANVAS = 200,
 ANCHURA_CANVAS = 400;

// Obtener el elemento del DOM
const canvas = document.querySelector("#canvas");
canvas.width = ANCHURA_CANVAS;
canvas.height = ALTURA_CANVAS;
// Del canvas, obtener el contexto para poder dibujar
const contexto = canvas.getContext("2d");

// Mover a donde comienza la curva
let inicioX = 50,
 inicioY = 50;
contexto.moveTo(inicioX, inicioY);
// Coordenadas del primer punto
let puntoX1 = 0,
 puntoY1 = 100;
// Coordenadas en donde termina la curva
let x = 100, y = 100;
contexto.quadraticCurveTo(puntoX1, puntoY1, x, y);
contexto.stroke();


// Lo siguiente es un rectángulo para
// indicar en dónde están los puntos
contexto.fillStyle = "red";
contexto.fillRect(puntoX1, puntoY1, 5, 5);
contexto.fillRect(x, y, 5, 5);
contexto.fillRect(inicioX, inicioY, 5, 5);

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.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
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/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

2 días hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

1 semana hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

1 semana hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

1 semana hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

1 semana hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

1 semana hace

Esta web usa cookies.