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 avanzado

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

Visitas el mes pasado: 320

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:


Tutorial de Canvas
mozilla.org
HTML5
htmlya
HTML5 Canvas Element Tutorial
html5canvastutorials
The canvas element
HTML Living Standard
HTML Canvas 2D Context
W3C Working Draft 24 May 2011
HTML - Living Standard
whatwg.org

Donativos

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




Canvas avanzado (I)

Anidar varios canvas

imagen canvas

Introducción

Este manual es continuación del manual Canvas básico de este mismo sitio web. En él hemos visto cómo iniciar un canvas, dibujar figuras básicas, dibujar rutas con líneas rectas y curvas, dar color y estilo a las figuras, y también insertar texto e imágenes.

Hasta ahora el canvas es algo estático que fabricamos nosotros. Sin embargo canvas tiene más posibilidades, tales como hacer transformaciones de figuras, interactuar con el usuario a través de javascript, animaciones, etc.

En los ejemplos de código javascript de canvas que pongamos en este tutorial, llamaremos siempre a la función iniciaCanvas(). Daremos ya por hecho que esta función la hemos puesto en nuestro código. La función la puedes encontrar en la segunda página del manual de Canvas Básico: Iniciar canvas.

Daremos por hecho también que sabemos que el código de Canvas debe cargarse una vez que la página se haya ya cargado, por lo que lo más sencillo es incluirlo dentro de la función window.onload=function().

Esto es importante tenerlo siempre en cuenta, ya que a partir de aquí, y para agilizar los códigos y las páginas no volveremos a repetirlo.

Y ahora empezemos con el manual:


Anidar varios canvas

Supongamos que hacemos una figura, la cual la queremos introducir varias veces en un mismo canvas, o queremos introducirla en varios canvas en la misma página. Dibujar la misma figura en distintas partes del canvas puede resultar bastante largo y complicado. La solución puede ser hacer un canvas con la figura que queremos dibujar, y después copiarla, como si fuera una imagen en los demás canvas.

Si queremos que el primer canvas con la figura no aparezca en la página , podemos ocultarla añadiendo al canvas el estilo CSS style="display: none;".

Vamos a hacer un ejemplo en el que aparecera un paisaje nevado, utilizaremos una imagen de fondo para el canvas, sin embargo los copos de nieve cayendo los añadiremos nosotros mediante una imagen construida con canvas. Lo primero es construir un canvas con un copo de nieve, para ello creamos un canvas. Su código HTML será el siguiente:

<canvas id="copo" width="20" height="20" style="background: maroon;"></canvas>
<img src="../objetos/nieve.jpg" alt="nieve">

Aquí hemos puesto un color de fondo oscuro al canvas para poder distinguir bien el dibujo que vamos a hacer, el cual es de color blanco.

Y el código javascript del canvas será el siguiente:

cxt1=iniciaCanvas("copo");
if (cxt1) {
cxt1.beginPath(); //iniciar ruta
cxt1.strokeStyle="white" //color de línea: blanco
cxt1.lineWidth=3; //grosor de línea 3px.
cxt1.lineCap="round"; //final de línea redondeado
//dibujamos una estrella de ocho puntas, para ello dibujamos dos líneas
// perpendiculares y centradas y otras dos diagonales.
cxt1.moveTo(10,3);
cxt1.lineTo(10,17);
cxt1.moveTo(3,10);
cxt1.lineTo(17,10);
cxt1.moveTo(5,5);
cxt1.lineTo(15,15);
cxt1.moveTo(5,15);
cxt1.lineTo(15,5);
cxt1.stroke()
}

De momento sólo hemos dibujado un copo de nieve en un canvas, puedes verlo aquí a la derecha en el cuadradito pequeño.

nieve

Sin embargo este dibujo del canvas repetido es el que nos permitirá crear en el dibujo principal la sensación de que está nevando.

Hacemos ahora un segundo canvas, más grande, en él pondremos la imagen que vemos aquí a la derecha ocupando todo el fondo:

Para ello insertamos la imagen en el código javascript como un objeto de imagen, después accedemos al primer canvas para tener la imagen del copo de nieve disponible:

imagen1=new Image(); 
imagen1.src="objetos/nieve.jpg";
copoNieve=document.getElementById("copo");

A continuación creamos el segundo canvas, en el cual pondremos la imagen del paisaje ocupando todo el canvas, y encima el primer canvas del copo de nieve, pero repetido 200 veces en posiciones aleatorias y en distintos tamaños.

Empezamos por el código HTML del canvas:

<canvas id="paisaje" width="300" height="225">
</canvas>

En el código javascript primero insertamos la imagen del paisaje, después, mediante un bucle insertamos 200 veces el canvas del copo de nieve, con posiciones aleatorias (mediante el método Math.random()); y con distintos tamaños. Este es el código javascript:

cxt2=iniciaCanvas("paisaje");
if (cxt2){
cxt2.beginPath(); //iniciar ruta
  imagen1.onload=function() { //cargar imagen paisaje
  cxt2.drawImage(imagen1,0,0,300,225); //insertar imagen
  a=4; //Controlar tamaño de copos (primer canvas) 
  for (i=1;i<=200;i++) { //insertar 200 copos de forma aleatoria
     //puntos x e y aleatorios para los copos
     x=Math.random()*300; 
     x=Math.round(x);
     y=Math.random()*225;
     y=Math.round(y);
     cxt2.drawImage(copoNieve,x,y,a,a);//insertar copo (canvas1)
     a+=4; //variar tamaño del siguiente copo.
     if (a>=16) {
         a=4;
         }
     }
  }	
}

El Resultado del código anterior se puede ver en el canvas de la derecha.

El código javascript está comentado para una mayor compresión. Fijate que para insertar un canvas dentro de otro buscamos el primero en el DOM, y lo insertamos en el segundo igual que si fuera una imagen. Hay que asegurarse de que en el primer canvas tenemos ya el dibujo hecho.

Como la imagen tarda más en cargarse que el canvas1, para que los copos de nieve queden encima de la imagen debemos esperar a que se cargue la imagen para insertar los copos, de lo contrario los copos quedarían debajo de la imagen, de ahí que hayamos insertado también los copos de nieve dentro de la función de carga de imagen.

Si queremos que el primer canvas, el del copo de nieve no aparezca en la página, y sólo se vea el segundo, debemos ponerle al primero la propiedad CSS: display: none;.

NOTA: Si estás siguiendo los ejemplos con nosotros conviene que guardes los canvas e imágenes que hacemos, pues algunos de ellos los retomamos para ejemplos en páginas posteriores.






En la siguiente página seguiremos insertando imágenes y canvas, pero esta vez como relleno de una figura.

Relleno con imágenes.



Canvas (avanzado)

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