HTML5 L'état du canevas

Lorsque nous dessinons des graphiques sur le canvas, nous avons souvent besoin de changer via save() et restore()2L'état du contexte D. Par exemple, lorsque vous dessinez une ligne ou un rectangle, vous avez besoin d'un strokStyle, et pour dessiner la ligne ou le rectangle suivante, vous avez besoin d'un autre strokStyle. Ou des couleurs de remplissage différentes, des angles de rotation, etc.

Lorsqu'il utilise2Le contexte D dans HTML5Lorsque vous dessinez sur le canevas, ce2Le contexte D est dans un certain état. Vous pouvez le manipuler2Les propriétés du contexte D (par exemple fillStyle et strokeStyle) pour définir cet état. Toutes ces opérations sont appelées au total2L'état du contexte D.
Généralement, lors du dessin sur le canevas, vous devez changer pendant le processus de dessin2L'état du contexte. Par exemple, strokStyle pour une ligne ou un rectangle, peut nécessiter un, et strokStyle pour d'autres lignes ou rectangles, peut nécessiter un autre. Ou d'autres alternances, ou d'autres.
Comme il est ennuyeux de configurer l'état complet avant de dessiner chaque forme, vous pouvez pousser l'état sur la pile d'état. Ensuite, vous pouvez enlever l'état plus ancien de cette pile d'état. C'est une méthode rapide pour restaurer un état plus ancien après une modification temporaire de l'état.

HTML5 Exemple d'état de canevas Canvas

Les méthodes pour empiler et dépiler les états de dessin sont les suivantes :

context.save();　　　　　//　Insérer un état dans la pile d'état.
context.restore();　　//　Sortir le premier état de la pile et le configurer en2d contexte.

Après avoir été stocké dans la pile, vous pouvez pousser plusieurs états sur cette pile et ensuite les enlever. Voici un exemple de code :

<canvas id="ex1" width="500" height="100" style="border:　1px solid #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>

Voici le résultat du code ci-dessus lors du dessin sur le canevas :

Utilité de l'état pile

Si vous modifiez le mode de composition du canevas ou les paramètres de conversion et que vous avez besoin de revenir aux paramètres avant de procéder aux modifications, l'état pile est très utile. En sauvegardant et en restaurant les modes de composition ou les paramètres de conversion, vous pouvez vous assurer que le réglage est correctement réinitialisé. Sinon, il peut être difficile de revenir aux réglages précis précédents.

2Quels sont les états du contexte D ?

tous2Les attributs de contexte sont une partie de la sauvegarde et de la restauration de l'état. Cependant, ce n'est pas ce qui est dessiné sur le canevas. Cela signifie que lors de la restauration de l'état, vous ne restaurerez pas le domaine de dessin lui-même. Vous ne restaurerez que2Paramètres de contexte (valeur de l'attribut). Ces paramètres incluent :

• fillStyle

• font

• globalAlpha

• globalCompositionOperation

• lineCap

• lineJoin

• lineWidth

• miterLimit

• shadowBlur

• shadowColor

• shadowOffsetX

• shadowOffsetY

• strokeStyle

• strokeStyle

• textAlign

• textBaseline
  

• Zone de découpe

• La matrice de transformation (par context.rotate())+ Rotation+Translation (context.setTransform())

Cette liste n'est pas exhaustive. Avec l'évolution des normes, d'autres attributs pourraient devenir2Fait partie de l'état du contexte.