Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Canvas básico

Crea tus propios dibujos y animaciones con Canvas en HTML5


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 128

Visitas el mes pasado: 184

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual de Canvas del HTML 5
Desarrollo Web
Tutorial de Canvas
mozilla.org
HTML5
htmlya
Empezando a dibujar en Canvas html 5 tutorial
taringa.net
Curva de Bézier
Wikipedia
flashcanvas
code.google.com
HTML5 Canvas tutorial
w3scool
HTML5 Canvas Element Tutorial
html5canvastutorials
The canvas element
HTML Living Standard

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Canvas básico (VII)

Curvas de Bezier

imagen canvas

Curvas cuadráticas

Las curvas de Bezier son un tipo de curvas usadas a menudo en diseño gráfico. No son arcos ya que la curvatura depende de la distancia que hay entre los puntos de inicio y final y otros puntos de control. Una descripción más detallada de este tipo de curvas la tenemos en Wikipedia: Curva de Bezier.

El tipo más simple de curva de Bezier es la curva cuadrática. Esta viene definida por tres puntos, un punto de inicio, un punto de final y un punto de control. El punto de inicio y de final marcan el principio y el fin de la curva, mientras que el punto de control, es un punto exterior a la misma que marca el grado de curvatura. Para entender cómo funciona veamos el siguiente gráfico.

Para definir la curva primero trazamos una línea desde el inicio hasta el punto de control, y otra desde el punto de control hasta el final. Ahora recorremos ambas líneas de manera que se tarde el mismo tiempo en recorrer las dos. Entre los dos puntos del recorrido trazamos otra línea. Por ejemplo, cuando hemos recorrido 1/4 parte de las dos líneas a la vez, trazamos una línea que va de un lado a otro (línea naranja), dentro de esa línea recorremos una cuarta parte, y ese será un punto de la curva.

Cuando hemos recorrido la mitad de las líneas, trazamos otra línea de la mitad de una a la mitad de otra (línea roja), el punto de la mitad de esa línea formará parte de la curva.

Curva cuadrática de Bezier

El gráfico de la derecha, proporcionado por la Wikipedia, nos ilustra de cómo se forma una curva cuadrática de Bezier.

Por lo tanto necesitamos tres puntos para definir una curva cuadrática, el de inicio, el del final y el de control.


Método QuadraticCurveTo()

El método QuadraticCurveTo() permite realizar curvas cuadráticas. Este método tiene la siguiente sintaxis:

cxt.quadraticCurveTo(<controlX>,<controlY>,<finX>,<finY>);

El método da por supuesto que hemos puesto con anterioridad el primer punto de la línea mediante un moveTo(), o un final de otra línea (lineTo()), etc. Por lo que este punto no lo indicamos.

Los dos primeros parámetros indican las coordenadas X e Y del punto de control, y los dos parámetros tercero y cuarto indican las coordenadas X e Y del punto final de la curva.

Visto esto crear una curva cuatrática en un canvas es relativamente facil. Veamos un ejemplo: Código HTML del canvas:

<canvas id="ejemplo1" width="200" height="200">
</canvas>

El código javascript para este canvas es el siguiente. Recuerda que debemos poner primero la función iniciaCanvas() explicada en la página 2 de este manual, y que el código debe ir dentro de la función window.onload = function().

cxt=iniciaCanvas("ejemplo1");
if (cxt) {
cxt.beginPath(); //iniciar ruta
cxt.strokeStyle="red"; //color de línea
cxt.lineWidth=5; //ancho de línea
cxt.moveTo(15,180); //punto de inicio de curva
cxt.quadraticCurveTo(130,5,180,160); //dibujar curva
cxt.stroke(); //visualizar
}

Tal vez la principal dificultad no está en el código, sino en elegir el punto de control para que la curva sea como nosotros queremos. Es posible que tengamos que probar varias veces, e ir cambiando el punto hasta que la curva tome la forma que queremos.


Curvas cúbicas de Bezier.

Como hemos dicho antes las curvas cuadráticas son la forma más simple de curvas de Bezier, Tenemos también las curvas cúbicas, las cuales tienen dos puntos de control.

Los cálculos que se hacen para obtener la curva son parecidos a los de las curvas cuadráticas. Unimos los puntos inicio y final con las líneas de control, y recorremos a la vez todas las líneas. Se crean unas líneas intermedias, las cuales también se recorren a la vez, y es esto lo que nos da la curva.

curva cúbica de Bezier

En la Wikipedia hemos encontrado el gráfico de la derecha, que ilustra cómo se forma una curva cúbica de Bezier.

La curva tiene dos puntos de control, P1 y P2, Observa cómo se van recorriendo las líneas mientras se forma la curva.


Método bezierCurveTo()

El método bezierCurveTo() crea una curva cúbica de Bezier, su sintaxis es parecida a la del método anterior:

cxt.bezierCurveTo(<controlX1>,<controlY1>,<controlX2>,<controlY2>,<finX>,<finY>);

Al igual que el anterior método, el punto de inicio viene dado por la posición del puntero, por lo que no hay que ponerlo en los parámetros.

Los parámetros de este método son los siguientes:

Ahora veamos un ejemplo de curva cúbica de Bezier. como siempre empecemos por el código HTML:

<canvas id="ejemplo2" width="200" height="200" >
</canvas>

El código javascript para este canvas es el siguiente. No olvidemos que debe ponerse dentro de la función windows.onload=function().

cxt2=iniciaCanvas("ejemplo2");
if (cxt2) {
cxt2.beginPath(); //iniciar ruta
cxt2.strokeStyle="maroon"; //color de línea
cxt2.lineWidth=5; //ancho de línea
cxt2.moveTo(50,180); //punto de inicio
cxt2.bezierCurveTo(10,40,120,-30,190,190); //curva de Bezier
cxt2.stroke(); //visualizar.
}

El resultado del código anterior se muestra aquí a la derecha.

Como en las curvas cuadráticas tal vez la mayor dificultad está en elegir los puntos de control para que la curva tenga el aspecto que nosotros queremos. Puede que tengamos que probar e ir cambiando los puntos en nuestro código e ir comprobando cómo quedan en la página hasta obtener el aspecto deseado.






En la siguiente página veremos las propiedades de gradientes de color.

Gradientes de color



Canvas (básico)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com