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 (curva de bezier)





El concepto de curva de Bezier lo podemos leer en la Wikipedia.


Básicamente debemos indicar dos coordenadas fijar y luego se traza una línea que une esos dos puntos. Esta línea se ve modificada por la atracción de otros dos puntos invisibles que ubicamos a discreción. Según la ubicación de estos dos puntos podemos ver como varía la curva.


Crearemos un ejemplo donde disponemos dos puntos que se encuentran en la misma fila y luego otros dos puntos uno por encima y otro por debajo de la recta que formarían los dos puntos iniciales:



<!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;
}

function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
lienzo.strokeStyle="rgb(255,0,0)";
lienzo.beginPath();
lienzo.moveTo(0,150);
lienzo.bezierCurveTo(100,50,200,250,290,150);
lienzo.stroke();

}
}

</script>

</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>



El primer punto fijo lo inicializamos llamando al método moveTo:



lienzo.moveTo(0,150);

El segundo punto fijo está indicado en los dos últimos parámetros del método bezierCurveTo (es decir 290,150), en tanto que los dos puntos invisibles son los valores (100,50) y (200,250):



lienzo.bezierCurveTo(100,50,200,250,290,150);









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

  • Medallas
  • 0
    Favoritos
  • 9650
    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