Comportement de DrawImage()
Bonjour,
Je dessine dans un canvas des images, en appliquant une notion de Layer/couche, où certaines images font partie d'une couche" background" et d'autres image font couche "characters" par exemple.
C'est dans une sorte de boucle ( fonction réentrante) que je dessine dans un canvas, exactement comme on le ferais dans une boucle de jeu, où l'on rafraichirait le contenue canvas suite à l'évolution des données du jeu.
Pour dessiner mes images dans le canvas, j'utilise la méthode drawImage()
Alors que mon code fonctionne plutôt bien, je remarque j'ai oublié d'appliquer de la transparence à mes images et j'ai donc des jolis carrés tout blanc.
Pendant que mon code continue de tourner, j'édite mes images depuis PhotoFiltre et applique la transparence à mes images.
C'est à ce moment que, sans je ne recharge ma page / mon code JS, etc, je constate mes modifications sur mes images sont automatique répercutées sur mon canvas.
Or, ce n'est pas le comportement que je pensais de la fonction drawImage()!
Je pensais que mes images sur mon PC n'étaient chargées qu'une seule fois, au moment de créer une Image (dans le sens, un objet Image de JS). Et ce n'est de toute évidence pas le cas.
Je n'aime pas du tout cette solution, bien trop lourde.
Sauriez vous s'il y a moyen de modifier ce comportement de la fonction ?
Connaissez une autre méthode pour dessiner sur une page WEB ( pas nécessairement dans un canvas) ?
En attente d'un retour de votre part,
Merci par avance,
Je vous propose une démonstration en vidéo avec mes commentaires:
Répondre avec citation
Partager