11485 sujets

JavaScript, DOM et API Web HTML5

bonjour,
j'utilise dans un projet l'outil graphique canvas et j'ai du mal à utiliser les méthodes save() et restore().
Mon but est d'avoir un arrière plan fixe sur lequel je met des animations.
j'ai donc quelque chose du type :

dessinerArrièrePlan();
context.save();
dessinerEtatInitialAnim();
context.save();
Loop(-1); //fait tourner la fonction draw en boucle

function draw(){
context.restore();
dessinerAnim();
actualiserAnim();
context.save();
}


D'après ce que j'avais compris, le restore() placé dans la boucle pouvait effacer la dernière version de l'animation (sauvegardée au passage précédant).
Et au premier passage c'est l'état initial de l'animation qui aurait été effacé.
Mais apparemment je me trompe, ça ne fonctionne pas. Quelqu'un sait-il pourquoi ?
Modifié par Johnsonn (22 Nov 2017 - 19:35)
Administrateur
Hello.

Les méthodes save() et restore() portent sur le contexte de dessin, c'est-à-dire qu'elles mémorisent les propriétés des "outils" comme les couleurs, la transparence, l'ombrage, etc. Elles ne vont pas modifier la surface de dessin, l'effacer, la restaurer. Pour ceci il faut passer par d'autres méthodes.

Si le but est d'avoir un arrière-plan fixe, l'idéal (d'après ce que je sais) c'est de superposer deux éléments canvas. Un qui reste fixe, et un autre par-dessus qui comprend les éléments d'animation. Rien n'interdit d'ailleurs d'en superposer encore plus, pour faire du parallaxe par exemple.
ok ok ! intéressant, je ne savais pas qu'on pouvait faire ça !
J'essaie tout de suite !
Merci bien .