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

Visitas el mes pasado: 148

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 (IV)

Dibujar rutas

imagen canvas

Concepto de ruta

Realizar un dibujo en Canvas es parecido a realizarlo en papel. vamos de un punto a otro trazando una línea, desde esté ultimo punto vamos al siguiente, y seguimos trazando la línea, luego podemos levantar el lápiz y llevarlo a otro punto, para seguir trazando otra línea, etc.

Esto es lo que hacemos con Canvas, indicamos dónde está cada uno de esos puntos y se irá trazando un dibujo al ir pasando por cada uno de ellos. Al camino recorrido al trazar la línea se le llama ruta, o también camino. Las líneas que unen los puntos pueden ser rectas o curvas. También podemos levantar el "lápiz" al pasar de una línea a otra.

Al "lapiz" imaginario le llamamos puntero, y recorre toda la línea de un punto a otro, por lo tanto estará en cada momento en una posición, normalmente en donde acaba la última línea que hemos trazado.

Al cerrarse las líneas forman dibujos, que pueden ser coloreados, o simplemente tener el contorno dibujado. Para todo esto Canvas dispone de una serie de métodos que se aplican al contexto.


Trazar una ruta


Método beginPath()

Este método inicia una nueva ruta. Debemos ponerlo siempre al principio de la ruta. Este método no tiene parámetros. Reinicia los estilos de color, grosor de línea, etc.

cxt.beginPath();


Color de línea y de relleno.

El siguiente paso que vamos a hacer es dar al dibujo un color de linea y otro de relleno. esto se hace con las propiedades fillStyle y strokeStyle que ya vimos en la página anterior:

cxt.fillStyle="red";

cxt.strokeStyle="blue";

Aunque es conveniente ponerlas al principio, estas propiedades las podemos poner en cualquier punto del código. Toda la ruta tendrá los mismos colores. Para cambiar de color debemos crear una nueva ruta mediante beginPath().


Empezar el dibujo

Para empezar el dibujo debemos en principio colocar el puntero en las coordenadas de inicio. Esto se hace mediante el método moveTo(x,y).

cxt.moveTo(65,10);

El método moveTo es como si levantáramos el lápiz y lo lleváramos hasta el punto indicado. Cada vez que queramos llevar el puntero a otro punto sin que se dibuje nada utilizaremos este método.


Dibujar líneas rectas

Para dibujar líneas rectas utilizaremos el método lineTo(x,y). Los parámetros "x" y "y" indican las coordenadas del final de la línea. El principio de la línea estará en la posición que tenga el puntero. El puntero se mueve después al final de la línea, de manera que la siguiente línea que pongamos empezará donde acaba ésta.

Aquí queremos dibujar un triángulo por lo que necesitamos tres líneas, ponemos de momento las dos primeras.

cxt.lineTo(140,140);

cxt.lineTo(10,140);

El puntero se desplaza desde su posición anterior a la marcada por lineTo. La línea todavía no se ha dibujado, pero está ya marcada. Por otra parte nos falta la tercera línea para cerrar el triángulo.


Cerrar una figura.

Nos falta una línea para cerrar la figura del triángulo. Tenemos ahora dos opciones, dibujar el contorno, para lo cual debemos cerrar la figura, o rellenar la figura de un color, para lo cual no es necesario cerrarla.

Para cerrar el contorno utilizaremos el método closePath(). Este método no tiene parámetros, simplemente traza una línea desde el punto donde está el puntero al inicio de la figura.

cxt.closePath();

Ahora para dibujar las líneas anteriores en el canvas como un contorno utilizaremos el método stroke().

cxt.stroke();

Este método tampoco tiene argumentos. Hace que las líneas que hay marcadas en la ruta se dibujen como un contorno.

Sin embargo si lo que queremos es rellenar la figura de un color, el método closePath no es necesario. Utilizaremos el método fill() el cual rellena de color la figura aunque no esté cerrada, ya que el método traza la línea recta desde el ultimo punto al primero.

cxt.fill();

Con esto ya hemos trazado una ruta simple para dibujar un triángulo, veamos ahora cómo queda en la práctica.


Ejemplo de triángulo con canvas

Recogemos el código anterior y lo aplicamos a la siguiente etiqueta canvas en HTML:

<canvas id="micanvas1" width="150" height="150">
</canvas>

Ahora ponemos el código javascript que hemos escrito antes, el cual es el siguiente:

window.onload=function() {
cxt=iniciaCanvas("micanvas1");
if (cxt) {
cxt.beginPath();
cxt.fillStyle="red";
cxt.strokeStyle="blue";
cxt.moveTo(65,10);
cxt.lineTo(140,140);
cxt.lineTo(10,140);
cxt.closePath();
cxt.stroke();
cxt.fill();
}
}

El resultado lo puedes ver aquí a la derecha. Hemos dibujado un triángulo con canvas. La función iniciaCanvas() a la que llamamos al principio del código es la descrita en la segunda página de este manual. Tal como explicamos en esa página, debemos ponerla en nuestro código.


Otro ejemplo de ruta.

El ejemplo anterior es muy sencillo, sin embargo podemos hacer dibujos tan complicados como quieras, utilizando los mismos métodos anteriores, es cuestión de imaginación y después planificarlos. Damos aquí otro ejemplo en el que dibujamos varias figuras con líneas rectas dentro de un canvas.

En el código HTML colocamos la etiqueta canvas:

<canvas id="micanvas2" width="210" height="80">
</canvas>

Después ponemos el código javascript de canvas:

cxt2=iniciaCanvas("micanvas2");
if (cxt2) {
cxt2.beginPath(); //inicio de ruta
cxt2.fillStyle="red"; //color de relleno rojo;
cxt2.strokeStyle="red"; //color de contorno rojo;
cxt2.moveTo(30,10); //dibujar rombo
cxt2.lineTo(50,40);
cxt2.lineTo(30,70);
cxt2.lineTo(10,40);
cxt2.fill(); //rellenar de color
cxt2.moveTo(80,10); //dibujar otro rombo
cxt2.lineTo(100,40);
cxt2.lineTo(80,70);
cxt2.lineTo(60,40);
cxt2.closePath(); //cerrar contorno
cxt2.stroke(); //visualizar contorno
cxt2.beginPath(); //iniciar otra ruta
cxt2.fillStyle="blue"; //color de relleno azul
cxt2.strokeStyle="blue"; //color de contorno azul
cxt2.moveTo(110,10); //dibujar figura reloj de arena
cxt2.lineTo(150,10);
cxt2.lineTo(110,70);
cxt2.lineTo(150,70);
cxt2.fill(); //rellenar de color
cxt2.moveTo(160,10); //otra figura reloj de arena
cxt2.lineTo(200,10);
cxt2.lineTo(160,70);
cxt2.lineTo(200,70);
cxt2.closePath(); //cerrar contorno
cxt2.stroke(); //visualizar contorno
}
}

El resultado lo puedes ver aquí a la derecha.

El código de canvas está formado por dos rutas, y en cada una de ellas hay dos dibujos. Para comenzar un nuevo dibujo usamos el método moveTo() que traslada el puntero del final de un dibujo al comienzo de otro.






En la siguiente página veremos algunas propiedades para cambiar el aspecto de las líneas.

Estilos de línea.



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