HTML5 Estado do canvas

Quando desenhamos gráficos no canvas, frequentemente precisamos mudar entre save() e restore()2O estado do contexto D. Por exemplo, quando você desenha uma linha ou um retângulo, precisa de um strokeStyle, e ao desenhar a próxima linha ou retângulo, precisa de outro strokeStyle. Ou diferentes cores de preenchimento, ângulos de rotação, etc.

ao usar seu2O contexto D no HTML5Quando se desenha no canvas, o2O contexto D está em algum estado. Você pode manipular2Atributos do contexto D (por exemplo, fillStyle e strokeStyle) para definir esse estado. Todas essas operações são coletivamente chamadas de2O estado do contexto D.
Normalmente, ao desenhar no canvas, você precisa alterar durante o processo de desenho.2O estado do contexto. Por exemplo, strokeStyle para uma linha ou retângulo, pode precisar de um, enquanto strokeStyle para outras linhas ou retângulos pode precisar de outro. Ou outras alternativas, ou outras.
Devido ao fato de ser muito complicado configurar o estado completo antes de desenhar cada forma, você pode empilhar o estado na pilha de estado. Em seguida, você pode esvaziar o estado mais antigo dessa pilha de estado. Esta é uma maneira rápida de restaurar o estado mais antigo após a alteração temporária do estado.

HTML5 Exemplo de estado de canvas

Métodos de empilhar e desempilhar o estado do desenho:

context.save();　　　　　//　Empilhar um estado na pilha de estado.
context.restore();　　//　Desempilhar o estado mais recente e configurar para2d contexto.

Após serem armazenados na pilha, você pode empilhar vários estados nessa pilha e, em seguida, esvaziar. Este é um exemplo de código:

<canvas id="ex1" width="500" height="100" style="border:　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 é o resultado do código acima ao desenhar na tela:

Uso da pilha de estado

Se você alterar o modo de composição da tela ou as configurações de conversão e precisar retornar aos ajustes antes de fazer a alteração, a pilha de estado é muito útil. Ao salvar e restaurar o modo de composição ou as configurações de conversão, você pode garantir que ele seja resetado corretamente. Caso contrário, pode ser difícil retornar aos ajustes exatos anteriores.

2Quais são os estados do contexto D?

todos2Os atributos do contexto são parte da salva e recuperação de estado. No entanto, o que é desenhado na tela não é. Isso significa que, ao restaurar o estado, você não restaurará a área de desenho em si. Você apenas restaurará2Configuração do contexto (valor do atributo). Essas configurações incluem:

• fillStyle

• font

• globalAlpha

• globalCompositionOperation

• lineCap

• lineJoin

• lineWidth

• miterLimit

• shadowBlur

• shadowColor

• shadowOffsetX

• shadowOffsetY

• strokeStyle

• strokeStyle

• textAlign

• textBaseline
  

• Área de recorte

• A matriz de transformação (através de context.rotate())+ Rotação+Translação context.setTransform())

Esta lista não é exaustiva. Com o desenvolvimento do padrão, mais propriedades podem se tornar2Parte do estado do contexto.