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

Visitas el mes pasado: 95

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

Traslación

imagen canvas

Concepto

El método de traslación permite cambiar el origen de coordenadas del canvas a otro punto del canvas. Una vez cambiado las figuras que creemos tendrán como origen de coordenadas ese nuevo punto.

La traslación forma parte de los métodos de transformación los cuales los iremos viendo a lo largo de esta página y las siguientes.


El método translate()

El método translate() permite hacer una traslación en el canvas y cambia su origen de coordenadas, su sintaxis es:

cxt.translate(x,y);

Donde los parámetros x e y son las nuevas coordenadas X (horizontal) e Y (vertical) del origen de coordenadas.

Al cambiar el origen de coordenadas, lo que habíamos dibujado anteriormente permanece en el mismo sitio, pero lo que dibujemos después tendrá como referencia el nuevo origen de coordenadas.

En muchas ocasiones es conveniente guardar el estado del canvas antes de cambiar el origen de coordenadas, mediante el método save(); de esta manera podremos restaurar el origen en estado anterior mediante el método restore.

Veamos un ejemplo: iniciamos un canvas con el siguiente código HTML:

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

Dibujamos luego en él un triángulo en la parte superior derecha. veamos el código javascript:

window.onload=function() {
cxt1=iniciaCanvas("ejemplo1");
cxt1.beginPath();
cxt1.moveTo(50,10);
cxt1.lineTo(90,70);
cxt1.lineTo(10,70);
cxt1.fillStyle="red";
cxt1.fill();

}

Lo que hemos hecho es una operación sencilla de dibujar un triángulo, tal como vemos aquí a la derecha.

Ahora cambiaremos el origen de coordenadas al punto 150x 50y y dibujaremos un círculo que tenga el centro encima de este mismo origen, es decir con las coordenadas 0x,0y, y radio de 40px. Antes de cambiar el origen guardaremos el estado del canvas mediante el método save().

Veamos el código javascript que añadimos al canvas:

cxt1.beginPath();
cxt1.save();
cxt1.translate(150,50);
cxt1.arc(0,0,40,0,2*Math.PI,true);
cxt1.fillStyle="blue";
cxt1.fill();

En el código guardamos el estado y trasladamos el origen del canvas a otro punto, en el cual creamos una circulo azul, tal como ves aquí a la derecha.

Ahora restauraremos el estado original, mediante el método restore y dibujaremos un rectángulo en la parte inferior izquierda del canvas: las coordenadas vuelven a estar en el punto superior izquierdo del canvas.

Añadimos en el canvas el siguiente código javascript:

cxt1.beginPath();
cxt1.restore();
cxt1.fillStyle="green";
cxt1.fillRect(10,90,70,50);

El código no tiene mayor dificultad. recuperamos las coordenadas iniciales mediante restore() y dibujamos el rectángulo con referencia a las coordenadas iniciales.


Ejemplo con el método translate()

El ejemplo que pondremos ahora es un poco más complicado. Crearemos un banner en el que hay un canvas con un paisaje nevado y un muñeco de nieve. Debajo del canvas hay una tabla en la que el usuario puede cambiar la posición del muñeco haciendo clic sobre las celdas.

muñeco de nieve

el paisaje y el muñeco lo ponemos mediante imágenes. La imagen del muñeco de nieve es la que ves aquí a la derecha, y la del paisaje nevado la misma que hemos utilizado en la primera página de este manual: "1. Anidar varios canvas".

En el código HTML creamos la etiqueta del canvas, y después una tabla con las diferentes opciones. Cada una de las etiquetas de las celdas llevará un atributo onclick que nos dirigirá a una función en la que cambiaremos las coordenadas del canvas y la altura del muñeco.

En principio insertamos la imagen del paisaje, que ocupará todo el canvas, y la imagen del muñeco. Para insertar la imagen del muñeco creamos la función verDibujo() que primero traslada las coordenadas y después inserta la imagen.

Cuando el usuario hace click en una opción, mediante onclick iremos a la función cambiar(), la cual primero recupera el estado del canvas, y después vuelve a cargar la imagen del paisaje. Al cargar de nuevo la imagen se borra el muñeco anterior. Después nos envia a la función verDibujo() que traslada de nuevo el origen y dibuja el muñeco en otra posición y tamaño.

Por último completamos el banner poniendo unas cuantas reglas en el codigo CSS para dar el aspecto adecuado a la lista de opciones.

Veamos ahora los códigos, los cuales son los siguientes. Código HTML:

<div id="marco">
<canvas id="micanvas" width="333" height="250">
</canvas>
<p>Cambia la posición del muñeco:</p>
<table>
 <tr>
   <td onclick="cambiar(0,130,70);">Sup. Izda</td>
   <td onclick="cambiar(111,130,70);">Sup. Ctro.</td>
   <td onclick="cambiar(222,130,70);">Sup. Dcha.</td>
 <tr>
 <tr>
   <td onclick="cambiar(0,140,85);">Ctro. Izda.</td>
   <td onclick="cambiar(111,140,85);">Ctro. Ctro.</td>
   <td onclick="cambiar(222,140,85);">Ctro. Dcha. </td>
 <tr>
 <tr>
   <td onclick="cambiar(0,150,100);">Inf. Izda.</td>
   <td onclick="cambiar(111,150,100);">inf. Ctro.</td>
   <td onclick="cambiar(222,150,100);">inf. Dcha.</td>
 <tr>
</table>	 
</div>

Vemos ahora el código CSS:

#micanvas { border: 1px solid black;  margin: 0px;   }
#marco { border: 2px solid black; width: 334px; height: 335px; 
        background: #eee; }
#marco p { padding: 0px; margin: 5px; text-align: center; 
        font: bold 14px arial;  }
#marco table { width: 334px ; border: 1px solid grey;
        border-collapse: collapse; cursor: pointer; }
#marco td { border: 1px solid grey; text-align: center; 
        font: bold 12px arial; }
#marco td:hover { color: blue; }

Y a continuación vemos el código javascript del canvas, el cual viene comentado:

window.onload=function() {
cxt=iniciaCanvas("micanvas");
cx=111; //valor inicial traslacion eje X
cy=140; //valor inicial traslación ejeY
d=85; //tamaño inicial muñeco
muneco=new Image(); //imagen del muñeco
muneco.src="objetos/muneco_nieve.gif";
fondo=new Image(); //imagen del fondo
fondo.src="objetos/nieve.jpg";
fondo.onload=function() { //una vez cargado el fondo
    cxt.drawImage(fondo,0,0); //ver imagen fondo
    verDibujo(cx,cy,d); //llamar a función para ver imagen muñeco.
    }
}	
//función para dibujar el muñeco
function verDibujo(cx,cy,d){ //cx,cy=Coord. nuevo origen. d=tamaño muñeco.
   cxt.save(); //salvar el estado
   cxt.translate(cx,cy); //trasladar el origen.
   cxt.drawImage(muneco,0,0,d,d);  //insertar imagen muñeco
	}
//función para cambiar muñeco de sitio.
function cambiar(a,b,c) { //a,b=nuevas coord.de origen. c=tamaño.
    cxt.restore(); //restaurar estado: coordenadas iniciales.
    cxt.drawImage(fondo,0,0); //reinsertar imagen de fondo; borra muñeco anterior.
    cx=a; cy=b;d=c; //valores para pasar a función  verDibujo()
    verDibujo(cx,cy,d);	//lamada a funcion para ver muñeco.
		}

Cambia la posición del muñeco:

Sup. Izda Sup. Ctro. Sup. Dcha.
Ctro. Izda. Ctro. Ctro. Ctro. Dcha.
Inf. Izda. inf. Ctro. inf. Dcha.

El resultado del ejemplo anterior puedes verlo aquí a la derecha.

Si sabes un poco de javascript seguramente no habrás tenido dificultad para comprender este ejemplo. Seguramente podríamos haber hecho este ejemplo de forma más sencilla sin usar el método translate(), sin embargo se trataba de comprender cómo funciona este método, y por eso lo hemos hecho así.

Fíjate que aunque cada imagen se puede insertar varias veces, éstas sólo se crean una vez. es por eso que la creación y carga de imágenes están fuera de las funciones que las insertan una y otra vez.






En la siguiente página veremos otro tipo de transformación, las rotaciones.

Rotación



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