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

Visitas el mes pasado: 130

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

Guardar y restaurar

imagen canvas

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 queda 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



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