Dibujar una curva suave con múltiples puntos es una tarea desafiante. Hay muchos algoritmos que pueden ayudarnos a dibujar una curva usando puntos particulares. Bezier Curve es la técnica de dibujo de curvas. Siempre hay mucha discusión sobre cómo dibujar una curva suave a través de múltiples puntos usando JavaScript. Entonces, se nos da para dibujar una curva suave a través de múltiples números de puntos.
Para dibujar una línea debemos tener una pendiente de la línea. Así que aquí calculamos la pendiente de una línea tomando múltiples entradas de x e y. Para dibujar una curva suave, debemos tener varios números de entradas/puntos mediante los cuales podemos dibujar la curva suave. Aquí estamos tratando de obtener un número aleatorio y para el cual estamos tratando de dibujar una curva suave.
Aquí, le damos algunas ideas sobre cómo dibujar una curva suave usando múltiples números de puntos. Por favor, revise este código y lo explicaremos con más detalle.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Smooth Curve
</title>
<style>
#GFG {
border: 2px solid black;
}
h1{
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<canvas id="GFG"
width="600" height="400">
</canvas>
</center>
<script>
var cv = document.getElementById("GFG");
var ctx = cv.getContext("2d");
function gradient(a, b) {
return (b.y-a.y)/(b.x-a.x);
}
function bzCurve(points, f, t) {
if (typeof(f) == 'undefined') f = 0.3;
if (typeof(t) == 'undefined') t = 0.6;
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
var m = 0;
var dx1 = 0;
var dy1 = 0;
var preP = points[0];
for (var i = 1; i < points.length; i++) {
var curP = points[i];
nexP = points[i + 1];
if (nexP) {
m = gradient(preP, nexP);
dx2 = (nexP.x - curP.x) * -f;
dy2 = dx2 * m * t;
} else {
dx2 = 0;
dy2 = 0;
}
ctx.bezierCurveTo(
preP.x - dx1, preP.y - dy1,
curP.x + dx2, curP.y + dy2,
curP.x, curP.y
);
dx1 = dx2;
dy1 = dy2;
preP = curP;
}
ctx.stroke();
}
// Generate random data
var lines = [];
var X = 10;
var t = 40; // control the width of X.
for (var i = 0; i < 100; i++ ) {
Y = Math.floor((Math.random() * 300) + 50);
p = { x: X, y: Y };
lines.push(p);
X = X + t;
}
// Draw smooth line
ctx.setLineDash([0]);
ctx.lineWidth = 2;
ctx.strokeStyle = "green";
bzCurve(lines, 0.3, 1);
</script>
</body>
</html>
Producción:
Explicación: cuando ejecutamos este programa, cada vez que toma entradas aleatorias y es por eso que genera una nueva curva suave en cada ejecución.
- Requisito previo: Conceptos básicos de HTML Canvas
- La referencia para el objeto de lienzo se almacena en la variable ‘cv’ usando el concepto DOM.
- Sin tener un contexto de dibujo del lienzo, no se puede dibujar nada en él.
var cv = document.getElementById("GFG"); var ctx = cv.getContext("2d"); - Función de gradiente que devuelve la pendiente de la línea.
function gradient(a, b) { return (b.y-a.y)/(b.x-a.x); } - El método BeginPath se utiliza para iniciar o restablecer la ruta.
- El método MoveTo se utiliza para mover la ruta al punto especificado en el lienzo.
ctx.beginPath(); ctx.moveTo(points[0].x, points[0].y); - Stroke se usa para dibujar la ruta que ha definido con todos esos métodos.
ctx.stroke();