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();
}
No hay comentarios:
Publicar un comentario