HTML5 Estado del canvas

Cuando dibujamos gráficos en el canvas, a menudo necesitamos cambiar a través de save() y restore().2El estado del contexto D. Por ejemplo, cuando dibuja una línea recta o un rectángulo, necesita un strokStyle, y al dibujar la siguiente línea recta o rectángulo, necesita otro strokStyle. O puede ser diferentes colores de relleno, ángulos de rotación, etc.

Al usar su2El contexto D en HTML5Al dibujar en el lienzo, el2El contexto D está en algún estado. Puede manipular2Propiedades del contexto D (por ejemplo, fillStyle y) para establecer este estado strokStyle. Todas estas operaciones se denominan2El estado del contexto D.
Generalmente, al dibujar en el lienzo, es necesario cambiar durante el proceso de dibujo.2El estado del contexto. Por ejemplo, strokStyle para una línea recta o rectángulo, podría necesitar uno, mientras que strokStyle para otras líneas rectas o rectángulos podría necesitar otro. Otra rotación, u otra.
Dado que es muy molesto configurar el estado completo antes de dibujar cada forma, se puede empujar el estado a la pila de estados. Luego se puede sacar el estado más antiguo de esta pila de estados. Esto es una manera rápida de recuperar el estado más antiguo después de un cambio temporal de estado.

HTML5 Ejemplo de estado de lienzo Canvas

Los métodos para apilar y desapilar el estado del estado de dibujo son los siguientes:

context.save();　　　　　//　Empuje un estado en la pila de estados.
context.restore();　　//　Saque el estado más reciente de la pila y configúrelo en2d contexto.

Después de almacenar varios estados en la pila, puede empujarlos a la pila y luego sacarlos. Este es un ejemplo de código:

<canvas id="ex1" ancho="500" altura="100" estilo="borde:　1px sólido #cccccc;">HTML5　Canvas　not　supported</canvas>
<script>
var　canvas　　=　document.getElementById("ex1");
var　context　=　canvas.getContext("2d");
context.fillStyle　　="#66ff66";
context.strokeStyle="#990000";
context.lineWidth　　=　5;
context.fillRect　　(5,　5,　50,　50);
context.strokeRect(5,　5,　50,　50);
context.save();
context.fillStyle　=　"#6666ff";
context.fillRect　　(65,　5,　50,　50);
context.strokeRect(65,　5,　50,　50);
context.save();
context.strokeStyle　=　"#000099";
context.fillRect　　(125,　5,　50,　50);
context.strokeRect(125,　5,　50,　50);
context.restore();
context.fillRect　　(185,　5,　50,　50);
context.strokeRect(185,　5,　50,　50);
context.restore();
context.fillRect　　(245,　5,　50,　50);
context.strokeRect(245,　5,　50,　50);
</script>

Este es el resultado del código anterior al dibujar en el lienzo:

Usos del pila de estados

Si cambia el modo de composición del lienzo o la configuración de conversión y necesita regresar a la configuración anterior antes de realizar el cambio, el pila de estados es muy útil. Al guardar y restaurar el modo de composición o la configuración de conversión, se puede garantizar que se restableció correctamente. De lo contrario, puede ser difícil regresar a la configuración exacta anterior.

2¿Cuáles son los estados del contexto D?

Todos2Los atributos del contexto de dibujo son parte de la conservación y restauración del estado. Sin embargo, lo que se dibuja en el lienzo no lo es. Esto significa que al restaurar el estado, no se restaurará el área de dibujo en sí. Solo se restaurará2Configuración del contexto (valores de atributo). Estas configuraciones incluyen:

• fillStyle

• font

• globalAlpha

• globalCompositionOperation

• lineCap

• lineJoin

• lineWidth

• miterLimit

• shadowBlur

• shadowColor

• shadowOffsetX

• shadowOffsetY

• strokeStyle

• strokeStyle

• textAlign

• textBaseline
  

• Región de recorte

• La matriz de transformación (a través de context.rotate())+ Giro+Translación context.setTransform())

Esta lista no es exhaustiva. Con el desarrollo del estándar, más propiedades podrían convertirse en2Es parte del estado del contexto.