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:
<!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.
El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…
En este post te voy a enseñar a designar una carpeta para imprimir todos los…
En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…
Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…
Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…
Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…
Esta web usa cookies.