CANVAS (método quadraticCurveTo)

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>

<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>

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;

Temario del Tutorial->12 - CANVAS (método quadraticCurveTo)

Retornar