Quel est le but de la Toile.Contexte d'Enregistrer et de Restaurer dans cet exemple?

Toile de l'état n'est pas ce qui est tiré sur elle. C'est une pile de propriétés qui définissent l'état actuel de la outils qui sont utilisés pour dessiner la prochaine chose.

Toile est immédiatement en mode bitmap.
Comme MS Paint. Une fois qu'il est là, il est là, donc il n'y a pas de point de "sauver" l'image actuelle de données, parce que ce serait comme sauver l'ensemble de l'JPEG, chaque fois que vous faites un changement, chaque image...

...non, l'état que vous enregistrez est l'état qui va dicter coordonner l'orientation, la dimension de l'échelle, la couleur, etc, que vous utilisez pour dessiner la PROCHAINE chose (et toutes choses par la suite, jusqu'à ce que vous modifiez ces valeurs à la main).

var canvas = document.createElement("canvas"),
    easel  = canvas.getContext("2d");

easel.fillStyle = "rgb(80, 80, 120)";
easel.strokeStyle = "rgb(120, 120, 200)";

easel.fillRect(x, y, width, height);
easel.strokeRect(x, y, width, height);

easel.save();  //stores ALL current status properties in the stack

easel.rotate(degrees * Math.PI / 180); //radians
easel.scale(scale_X, scale_Y); //any new coordinates/dimensions will now be multiplied by these
easel.translate(new_X, new_Y); //new origin coordinates, based on rotated orientation, multiplied by the scale-factor

easel.fillStyle = "gold";
easel.fillRect(x, y, width, height); //completely new rectangle
//origin is different, and the rotation is different, because you're in a new coordinate space

easel.clearRect(0, 0, width, height); //not even guaranteed to clear the actual canvas, anymore
easel.strokeRect(width/2, height/2, width, height); //still in the new coordinate space, still with the new colour


easel.restore(); //reassign all of the previous status properties
easel.clearRect(0, 0, width, height);

En supposant que vous avez été seulement un changement d'état de profonde sur la pile, cette dernière ligne, maintenant que votre toile' état précédent a été restauré, devrait ont réussi effacé lui-même (sous-pixel manigances nonobstant).

Donc, comme vous pouvez le voir, il a très, TRÈS peu à voir avec l'effacement de la toile.

En fait, il n'a rien à voir avec l'effacer, à tous.

Il a de la volonté pour en tirer quelque chose, et de faire la base décrivant le balayage et de couleurs, de styles, et puis l'écriture manuelle dans les couleurs pour le plus petit des détails sur le dessus, et puis l'écriture manuelle de tous les styles de la même manière qu'ils l'étaient avant, pour revenir à balayer les traits de l'objet suivant, et ainsi de suite...

Au lieu de cela, enregistrez les états généraux qui seront réutilisés, créer un nouvel état pour les petits détails, et le retour à l'état général, sans avoir à coder en dur, à chaque fois, ou écrire des fonctions de définition pour définir les plus fréquemment utilisés, les valeurs sur la toile et plus (réinitialisation de l'échelle/rotation/affine de transformations/couleurs/polices/ligne-largeurs/référence-alignement, etc).

Dans votre exemple précis, alors, si vous êtes attentif, vous verrez que la seule chose qui change est la valeur de step.

Ils ont mis l'état d'un ensemble de valeurs de la toile (couleur, police, etc).

Et puis ils à sauver. Eh bien, qu'ont-ils économiser?

Vous ne cherchez pas assez profond. Ils ont en fait enregistré la traduction par défaut (c'est à dire: origine=0,0 original de l'espace-monde).

Mais vous ne les voyez pas le définir?

Parce qu'il est défini en tant que par défaut.

Ils augmentent ensuite l'étape 1 pixel (en fait, ils le font en premier, mais il n'a pas d'importance, après la première boucle-reste avec moi ici).

Puis ils ont mis un nouveau point d'origine 0,0 (ie: à partir de maintenant, quand ils type 0,0 que nouveau point d'origine à un endroit complètement différent sur la toile).

Que le point d'origine est égale à x étant l'exact milieu de la toile, et y étant égal à l'étape actuelle (c'est à dire: 1 pixel par pixel 2, etc... et pourquoi cette différence entre commençant à 0 et à partir de 1 n'est pas vraiment important).

Alors que font-ils?

Ils se restaurer.

Bien, qu'ont-ils restaurés?

...eh bien, qu'ont-ils changé?

Ils sont la restauration du point d'origine à 0,0

Pourquoi?

Bien, qu'arriverait-il s'ils n'en ont pas?

Si la toile est 500px x 200px, et il commence à 0,0 dans notre espace à l'écran... ...c'est super...

Puis ils la traduire de largeur/2, 1

Ok, alors maintenant, quand ils demandent de dessiner du texte à 0,0 ils seront en fait le dessin à 250, 1

Merveilleux. Mais qu'advient-il la prochaine fois?

Maintenant ils sont en train de traduire par largeur/2, 2

Vous pensez que, eh bien, c'est très bien... ...l'appel de 0,0 va arriver à 250, 2, parce qu'ils l'ont pour effacer les numéros: toile.largeur/2, 2

Nope. Le fait que le courant 0,0 est en fait 250,1 selon notre écran. Et une traduction est par rapport à sa précédente traduction...

...alors maintenant, vous dites à la toile pour commencer à il est courant de coordonnées 0,0 et allez à gauche 250, et de 2.

En fonction de l'écran (qui est comme une fenêtre, en regardant la carte, et pas la carte elle-même), nous sommes maintenant 500px vers la droite, et 3 pixels vers le bas à partir de là que nous avons commencé... Et un seul cadre, est passé.

Afin de restaurer la carte de coordonnées d'être de la même origine que celle de l'écran de coordonnées (et la rotation à la même, et l'échelle, et l'inclinaison, etc...), avant de créer le nouveau.

Et comme vous pouvez le deviner, en le regardant, maintenant, vous pouvez voir que le texte devrait en fait se déplacer de haut en bas. Pas de droite à gauche, comme la page dit...

Pourquoi faire cela?

Pourquoi prendre la peine de changer les coordonnées du système de la mise en plan-cadre, lorsque le tirage au sort des commandes de vous donner un x et y là, dans la fonction?

Si vous voulez dessiner une image sur la toile, et vous savez à quelle hauteur et de largeur, et de l'endroit où vous souhaitez le coin supérieur gauche de l'être, pourquoi ne pouvez-vous pas juste le faire:

easel.drawImage(myImg, x, y, myImg.width, myImg.height);

Bien, vous le pouvez.

Vous pouvez tout à fait faire cela. Rien ne peut vous arrêter.

En fait, si vous voulais faire un zoom autour de l'écran, vous pouvez simplement mettre à jour le x et y sur une minuterie, et l'appeler un jour.

Mais que diriez-vous si vous étiez le dessin d'un personnage de jeu? Que faire si le personnage avait un chapeau, et avait des mains gantées, et de grandes bottes, et toutes ces choses ont été tirées séparés par le caractère?

Donc d'abord vous dirais "bien, il est debout à x et y dans le monde, de sorte que x plus où sa main est dans la relation à son corps serait x + corps.x - main.x...ou était-ce plus..."

...et vous avez maintenant tracer les appels pour l'ensemble de ses parties qui sont tous à la recherche comme un carnet plein de Grade 5 devoirs de maths.

Au lieu de cela, vous pouvez dire: "Il est ici. Ensemble de mes coordonnées, afin que 0,0 est droit dans le milieu de mon mec". Maintenant votre tirage les appels sont aussi simples que "Ma main droite est de 6 pixels vers la droite du corps, ma main gauche est de 3 pixels vers la gauche".

Et lorsque vous avez terminé votre personnage de dessin, vous pouvez configurer votre origine remonte à 0,0 et puis le caractère suivant peut être établi. Ou, si vous voulez essayer, vous pouvez ensuite traduire à partir de là à l'origine du caractère suivant, basé sur le delta de l'un à l'autre (cela vous fera gagner un appel de fonction par la traduction). Et puis, si vous ne sauvé de l'état une fois que tout le temps (l'état initial), à la fin, vous pouvez revenir à 0,0 en appelant .restore.

OriginalL'auteur Norguard