Webmaster Workers utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies


CANVAS (grabar y recuper el estado - save(), restore())





Cuando tenemos que hacer dibujos complejos es muy común que necesitemos almacenar el estado de algunas propiedades del canvas para luego recuperarlas. Estas dos actividades se logran mediante los métodos:



save()
restore()

Los valores que se almacenan son strokeStyle, FillStyle, globalAlpha, LineCap, LineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor entre otras propiedades.


Tengamos en cuenta que si se llama dos veces en forma sucesiva al método save() para retornar al estado inicial debemos llamar dos veces al método restore().


Para ver su funcionamiento desarrollaremos un programa que muestre un cuadrado en color rojo, otro con un gradiente del rojo al azul y finalmente otro cuadrado rojo:



<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript">
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
return false;
}

function dibujarCuadradoGradiente(lienzo,x,y,ancho,alto) {
lienzo.save();
var gradiente1=lienzo.createLinearGradient(x,y,x+ancho,y+alto);
gradiente1.addColorStop(0,"rgb(255,0,0)");
gradiente1.addColorStop(1,"rgb(0,0,255)");
lienzo.fillStyle=gradiente1;
lienzo.fillRect(x,y,ancho,alto);
lienzo.restore();
}

function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
lienzo.fillStyle="rgb(255,0,0)";
lienzo.fillRect(10,30,30,30);
dibujarCuadradoGradiente(lienzo,70,30,30,30);
lienzo.fillRect(130,30,30,30);
}
}

</script>

</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>

Dibujamos un cuadrado de color rojo:



lienzo.fillStyle="rgb(255,0,0)";
lienzo.fillRect(10,30,30,30);

Llamamos a la función dibujarCuadradoGradiente:



dibujarCuadradoGradiente(lienzo,70,30,30,30);

La función dibujarCuadradoGradiente lo primero que hace es grabar el estado actual (save()) y luego configura nuevamente la propiedad fillStyle con un objeto de tipo LinearGradient. Finalmente luego de graficar el cuadrado restaura el estado actual (restore()):



function dibujarCuadradoGradiente(lienzo,x,y,ancho,alto) {
lienzo.save();
var gradiente1=lienzo.createLinearGradient(x,y,x+ancho,y+alto);
gradiente1.addColorStop(0,"rgb(255,0,0)");
gradiente1.addColorStop(1,"rgb(0,0,255)");
lienzo.fillStyle=gradiente1;
lienzo.fillRect(x,y,ancho,alto);
lienzo.restore();
}








Opciones
Estadísticas
Creado 01.01.1970 a las 00:00 hs
Categoría HTML 5

  • Medallas
  • 0
    Favoritos
  • 9716
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Administrador Administrador
Hombre Administrador  Mensaje
43 1,352 1
Medallas
No tiene medallas
Tags
Posts relacionados