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 III

Guardar y restaurar

Propiedades save() y restore()

El conjunto de todas las propiedades y algunos métodos que tiene un canvas en un momento constituye el estado del mismo. El estado se compone por propiedades como fillStyle, strokeStyle, lineWidth, lineCap, lineJoin, globalAlfa y las propiedades que sirven para crear sombras, las transformaciones y el método clip() (que veremos más adelante).

El estado del canvas en un momento dado puede ser guardado mediante el método save().

cxt.save():

Este método no tiene parámetros, y guarda los estilos, transformaciones, etc. que tiene el canvas en el momento de escribirlo.

Después de guardar el estado, podemos seguir dibujando en el canvas normalmente, y cambiar el estado cambiando algunas propiedades y métodos.

Cuando queremos recuperar el estado anterior, escribimos el método restore():

cxt.restore()

Este método tampoco tiene parámetros y restaura el estado del canvas al que tenía cuando se escribio el método save().

Podemos anidar varios métodos save(), creando así una serie de capas anidadas. Cada vez que llamamos al método restore() saldremos de una capa para ir a la anterior.

Ejemplo de salvar y restaurar

Vamos a hacer un sencillo ejemplo en el que guardamos y restauramos varios estados del canvas.

Empezamos por el código HTML del canvas:

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

Ahora dibujamos un círculo azul claro con borde azul oscuro de 5px. Utilizamos el siguiente código javascript:

cxt1=iniciaCanvas("ejemplo1");
cxt1.beginPath()
cxt1.fillStyle="aqua";
cxt1.strokeStyle="navy";
cxt1.lineWidth=5;
cxt1.arc(50,50,40,0,2*Math.PI);
cxt1.stroke();
cxt1.fill();

El canvas quedar de momento tal como lo vemos a la derecha.

A continuación salvamos el estado del canvas con el método save(), e iniciamos una nueva ruta en la que dibujamos un círculo amarillo con un borde naranja de 10px. El nuevo círculo lo situamos a la derecha del anterior.

Para ello debajo del código javascript que ya tenemos seguimos escribiendo código:

cxt1.save(); //salvar estado
cxt1.beginPath() //nueva ruta
cxt1.fillStyle="yellow";
cxt1.strokeStyle="orange";
cxt1.lineWidth=10;
cxt1.arc(140,50,40,0,2*Math.PI);
cxt1.stroke();
cxt1.fill();

Hemos guardado un primer estado, y después dibujamos un segundo círculo. el canvas queda tal como lo vemos aquí a la derecha.

A continuación salvamos otra vez el estado, y dibujaremos otro círculo a la derecha, con el fondo color lima y un borde verde de 3px.

Para ello seguimos escribiendo el código javascript debajo del que ya tenemos:

cxt1.save(); //salvar estado
cxt1.beginPath() //nueva ruta
cxt1.fillStyle="lime";
cxt1.strokeStyle="green";
cxt1.lineWidth=3;
cxt1.arc(230,50,40,0,2*Math.PI);
cxt1.stroke();
cxt1.fill();

Hemos salvado otra vez el estado y hemos dibujado otro círculo. el resultado aparece aquí a la derecha.

Ahora dibujaremos un cuadrado debajo de cada círculo, de manera que cada cuadrado tenga el mismo estilo de color y grosor de línea que el círculo superior. para ello iremos restaurando los estados que hemos salvado, de manera que tras cada restauración dibujamos el cuadrado correspondiente.

El primer cuadrado que dibujaremos es el de la derecha, como el estado es el mismo que el del último circulo dibujado, no necesitamos restaurar. simplemente dibujamos el cuadrado.

Para insertar el cuadrado seguimos escribiendo en el código javascript, debajo del que ya tenemos:

cxt5.beginPath() //nueva ruta
cxt5.fillRect(195,100,70,70);
cxt5.strokeRect(195,100,70,70);

Hemos dibujado un cuadrado con los mismos estilos que el círculo superior. el canvas de momento queda tal como se ve aquí a la derecha.

Ahora dibujaremos el cuadrado que va debajo del círculo central, para ello no tenemos que volver a escribir las propiedades de color y ancho de línea, sino que simplemente restauramos el estado anterior y dibujamos el cuadrado.

Para ello seguimos escribiendo en el código javascript debajo del que ya tenemos.

cxt1.restore() //restaurar estado
cxt1.beginPath() //nueva ruta
cxt1.fillRect(105,100,70,70);
cxt1.strokeRect(105,100,70,70);

Hemos restaurado el estado, y con ello hemos vuelto a los estilos que tenían el dibujo del círculo amarillo, despues hemos dibujado el cuadrado, que aparece ya con ese estilo, tal como vemos aquí a la derecha.

Por último, volvemos a restaurar el estado y dibujamos el último cuadrado, que quedará igual con los mismos estilos que el primer círculo que hemos dibujado.

Seguimos escribiendo el código javascript debajo del que ya tenemos:

cxt1.restore() //restaurar estado
cxt1.beginPath() //nueva ruta
cxt1.fillRect(15,100,70,70);
cxt1.strokeRect(15,100,70,70);

Ya tenemos el dibujo completo, tal como puede verse aquí a la derecha.

Al utilizar los métodos save() y restore() evitamos tener que escribir un código que anteriormente ya teníamos. Este es un ejemplo bastante simple, pero que espero que haya servido para ver cómo funcionan estos métodos. En páginas posteriores veremos otras utilidades de estos métodos.






En la siguiente página veremos lo que son las regiones del canvas.

Regiones del canvas



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