Webmaster Workers utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies


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;








Opciones
Estadísticas
Creado 01.01.1970 a las 00:00 hs
Categoría HTML 5

  • Medallas
  • 0
    Favoritos
  • 9689
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Administrador Administrador
Hombre Administrador  Mensaje
43 1,352 1
Medallas
No tiene medallas
Tags
Posts relacionados