Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

Canvas avanzado VI

Traslación

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



Manual Canvas avanzado

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo