El contexto del canvas tiene una pila de estados. El estado del contexto del canvas contiene los valores actuales de distintos parámetros que se han fijado para el canvas:
- Las transformaciones: traslación, rotación, escalado
- La región de dibujo (clipping region)
- Los valores actuales de los atributos: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline.
- guardar el estado
- hacer las modificaciones
- dibujar lo que queramos con los nuevos ajustes
- recuperar el estado
- context.save(): guarda el estado actual en la parte superior de la pila
- context.restore(): saca (y aplica al contexto) el estado de la parte superior de la pila
Ejemplo
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="my_canvas" width="300px" height="200px"
style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var x = 10;
var y = 10;
var w = 50;
var h = 50;
// estado original: 0
ctx.fillRect(x, y, w, h);
ctx.save();
// estado 1
ctx.fillStyle = "#ff0000"; // rojo
ctx.fillRect(x+w, y, w, h);
ctx.save();
// estado 2
ctx.fillStyle = "#00ff00"; // verde
ctx.fillRect(x+2*w, y, w, h);
// recuperamos el estado 1
ctx.restore();
ctx.fillRect(x+3*w, y, w, h);
// recuperamos el estado 0
ctx.restore();
ctx.fillRect(x+4*w, y, w, h);
</script>
</body>
</html>
En este ejemplo únicamente hemos modificado el color de relleno, pero el mismo principio se aplica a cualquiera de los parametros contenidos en el contexto.
Esta entrada continua la entrada anterior: Transformaciones en el canvas.
No hay comentarios:
Publicar un comentario