El concepto de este tipo de curva es similar a la de Bezier. La diferencia es que solo hay un punto de atracción.
Confeccionaremos un ejemplo que muestre una curva de este tipo y desplazaremos el punto de atracción en forma vertical (cada vez que lo desplacemos borraremos el canvas y volveremos a graficar):
<!DOCTYPE HTML>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
<script type="text/javascript">
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
return false;
}
var fila=0;
function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
lienzo.clearRect(0,0,300,300);
lienzo.strokeStyle="rgb(255,0,0)";
lienzo.beginPath();
lienzo.moveTo(0,150);
lienzo.quadraticCurveTo(150,fila,300,150);
lienzo.stroke();
fila++;
if (fila>300)
fila=0;
}
}
function iniciar() {
setInterval(dibujar,10);
}
</script>
</head>
<body onLoad="iniciar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
El resultado en el navegador al cargar esta página es:
La función inicar se ejecuta una vez que la página se encuentra cargada, en esta función llamamos a setInterval y le pasamos como parámetro la función que debe ejecutarse cada 10 milisegundos:
function iniciar() {
setInterval(dibujar,10);
}
En la función dibujar lo primero que hacemos el borrar el contenido del canvas:
lienzo.clearRect(0,0,300,300);
Definimos el color de la línea, inicializamos el camino, mediante el método moveTo definimos el primer punto fijo de la curva y seguidamente llamamos la método quadraticCurveTo pasando como parámetro el punto movil y los dos últimos parámetros indican el segundo punto fijo de la curva:
lienzo.strokeStyle="rgb(255,0,0)";
lienzo.beginPath();
lienzo.moveTo(0,150);
lienzo.quadraticCurveTo(150,fila,300,150);
lienzo.stroke();
Incrementamos la variable global que permite modificar en cada paso la ubicación del punto de atracción:
fila++;
Si la variable supera el valor 300 volvemos a asignarle el valor 0:
if (fila>300)
fila=0;