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

Visitas el mes pasado: 177

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

Rectángulos.

imagen canvas

Cuestiones previas

En esta página y las siguientes vamos a ver cómo dibujar líneas y figuras con lineas rectas, tales como cuadrados, triángulos, etc.

En páginas anteriores hemos visto como para inicializar canvas buscamos el elemento canvas en javascript y extraemos el contexto. Dibujar con canvas es tan fácil como aplicarle una serie de métodos y propiedades al contexto.

Para ello hicimos una función iniciaCanvas() que extrae el contexto de cualquier canvas.

A partir de ahora, al dar códigos de canvas, daremos por hecho que ya hemos llamado a la función, así como que el código lo hemos puesto dentro de la función anónima window.onload = function(), o en su defecto está colocado detrás del elemento html canvas.


Rectángulos

Veremos a continuación unos métodos que aplicamos al contexto para dibujar rectángulos, así como unas propiedades para cambiar su color. Dentro de javascript extraemos el contexto de canvas, al que llamaremos cxt. Utilizaremos para ello la función ya vista en la página anterior.

cxt=iniciaCanvas("micanvas1")

Ahora podemos utilizar los siguientes métodos para dibujar rectángulos:


Método fillRect

cxt.fillRect(a,b,c,d);

Dibuja un rectángulo y lo rellena de color. Los parámetros a y b indican la distancia en píxeles horizontal y vertical respectivamente que hay desde el extremo superior izquierdo del canvas o lienzo hasta el extremo superior izquierdo del cuadrado, es decir las coordenadas X e Y. Los parámetros c y d indican la anchura y altura del rectángulo medida en píxeles. Estos parámetros son números, por lo que debemos escribirlos sin comillas y sin ningún indicador de medida.

cxt.fillRect(10,10,50,50);

Dibuja un cuadrado de 50 x 50 pixeles a una distancia de 10 pixeles a la derecha y 10 hacia abajo del borde superior izquierdo del canvas.


Método strokeRect

cxt.strokeRect(a,b,c,d);

Al igual que el anterior, éste también dibuja un rectángulo, pero sólo el contorno, es decir las líneas de alrededor. El valor de los parámetros es igual que en el anterior, es decir, a y b son las coordenadas X e Y, y c y d son la anchura y altura respectivamente.


Método clearRect

cxt.clearRect(a,b,c,d);

Este método borra un área rectangular y la deja transparente o sin contenido. Los parametros tienen el mismo valor que en los métodos anteriores: a y b son las coordenadas, y c y d la anchura y altura.


Propiedad fillStyle

cxt.fillStyle="<color>";

Esta propiedad cambia el color de relleno de los elementos que, en el código están escritos después de ella. Su valor puede ser cualquier forma de escribir los colores, incluidas las nuevas formas con transparencia para HTML5, si bien estas últimas no serán soportadas por algunos navegadores.


Propiedad strokeStyle

cxt.strokeStyle="<color>";

Esta propiedad cambia el color de las líneas, y por lo tanto del contorno de los elementos que en el código van escritos detrás de ella. Su valor, al igual que la anterior, puede ser cualquier forma de escribir un color.


Ejemplos de canvas con rectángulos.

Vamos a hacer un pequeño ejemplo de poner varios rectángulos en un canvas. El código html del canvas será:

<canvas id="micanvas1" width="200px" height="120px">
</canvas>

Y el código javascript es el siguiente:

window.onload=function() {
cxt=iniciaCanvas("micanvas1");
if (cxt) {
cxt.fillRect(10,10,50,40);//dibujamos un rectángulo.
cxt.fillStyle="green"; //cambiamos color de relleno a verde.
cxt.fillRect(70,10,50,40); //otro rectángulo a la derecha.
cxt.fillStyle="red"; //cambiamos color de relleno a rojo.
cxt.fillRect(130,10,50,40); //otro rectángulo a la derecha.
cxt.strokeRect(10,60,50,40); //dibujamos un rectángulo, sólo el contorno.
cxt.strokeStyle="blue"; //cambiamos el color de contorno a azul.
cxt.strokeRect(70,60,50,40); //contorno de rectángulo.
cxt.strokeStyle="fuchsia"; //cambiamos color contorno a fucsia.
cxt.strokeRect(130,60,50,40); //contorno de rectángulo.
}
}

El resultado puedes verlo aquí a la derecha, como puedes observar primero debemos cambiar el color de fondo o de contorno, y después dibujar la figura.

A los primeros no les hemos dado color, por lo que toma el color que tiene el navegador por defecto, que suele ser el negro.

El color de fondo y el contorno de nuestros canvas se debe a que le hemos puesto la siguiente línea en CSS:

canvas { background:#ffffcc ; border: 1px solid black; }

Veamos otro ejemplo, un poco más complicado:

Empezamos por el código HTML

<canvas id="micanvas2" width="150" height="240">
</canvas>

Ponemos después el código javascript, el cual irá dentro de la función window.onload = function().

cxt2=iniciaCanvas("micanvas2");
if (cxt2) {
cxt2.fillStyle="red";//color de relleno rojo
cxt2.fillRect(20,20,110,80); //dibujamos un rectángulo
cxt2.strokeStyle="blue"; //color de contorno azul
cxt2.strokeRect(20,20,110,80); //cotorno del rectángulo anterior
cxt2.fillStyle="green"; //color de relleno verde
//este rectángulo y el siguiente se cruzan formando una cruz
cxt2.fillRect(65,30,20,60);
cxt2.fillRect(45,50,60,20);
cxt2.fillRect(20,130,110,80); //dibujamos otro rectángulo debajo del primero
cxt2.strokeRect(20,130,110,80); //contorno del rectángulo anterior
//borramos dos rectángulos dentro del anterior, formando una cruz.
cxt2.clearRect(65,140,20,60); 
cxt2.clearRect(45,160,60,20);
}

El resultado lo puedes ver aquí a la derecha.

Una cosa que debemos tener muy en cuenta es realizar los cálculos para poner cada rectángulo en su punto de coordenadas de manera que formen el dibujo que queremos.

Por lo demás la cosa no tiene mayor dificultad que aplicar los métodos y propiedades de canvas al contexto.

Los métodos también nos permiten dibujar cuadrados, ya que un cuadrado no es más que un rectángulo con los dos lados iguales.







En la siguiente página continuamos con dibujos en canvas, veremos cómo dibujar otro tipo de figuras enlazando líneas rectas.

Dibujar rutas.



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