[CANVAS] translate avec une image [Résolu]

Signaler
Messages postés
64
Date d'inscription
jeudi 25 octobre 2018
Statut
Membre
Dernière intervention
12 septembre 2020
-
Messages postés
64
Date d'inscription
jeudi 25 octobre 2018
Statut
Membre
Dernière intervention
12 septembre 2020
-
Bonjour je voudrais savoir comment on peut appliquer la méthode ctx.translate(70, 70); mais pour une image et non un rectangle et je voudrais savoir si il est possible de mettre cette méthode dans une boucle "for" pour que l'image avance automatiquement.

Merci beaucoup de votre aide

2 réponses

Salut,
la méthode translate(de CanvasRendererContext2d) modifie la position du repère cartésien du contexte 2D.
Rien à voir avec le dessin d'un rectangle ou d'une image donc comme vous pouvez le voir ici:

https://www.w3schools.com/TAgs/canvas_translate.asp

le premier rectangle est dessiné à une position (avant le translate)et le second à une autre(après le translate)le centre du repère cartésien est "translaté" de 70 en abscisse et de 70 en ordonné. Que vos dessiniez des cercles , rectangle ou des images n'a donc aucun rapport.
Pour les image sil faut utiliser la méthode(toujors du contexte CanvasRenderer2D) drawImage:

https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D/drawImage

Avec les transformation du repère cartésien n'oubliez pas d'utiliser les méthodes save et restore pour pouvoir revenir à une position initiale.


Une boucle for effectuera consécutivement le nombre de dessin un certain nombre de fois d'affilés(indiqué par les bornes de la boucle), donc en superposition. Elle n'est donc pas adpaté à faire de l'animation.

Il y a par contre des fonctions prévues pour l'animation comme setInterval et encore mieux requestAnimationFrame qui définissent une boucle d'exécution avec un temps(vitessse de l'animation), le début de chaque cycle de la boucle étant d'effacer le contenu du canvas avant de le redessiner.

Vous trouverez facilement des exemples et cours avec une recherche animation JavaScript, animation avec Canvas etc...

Ceci dit plutôt que d'utiliser translate qui modifie tout votre repère il est plus simple de faire varier les positions x et y utilisées en paramètres de la méthode de dessin que de faire bouger l'origine x et y du repère cartésien...en tout cas c'est plus logique puisque c'est le dessin qui doit être déplacé et non le repère.
un exemple:

https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques

à noter que vous pouvez utiliser un polyfil pour les navigateurs qui n'aurait pas la fonction requestAnimationFrame. Celui ci est l'un des plus connus:
https://gist.github.com/paulirish/1579671
Messages postés
64
Date d'inscription
jeudi 25 octobre 2018
Statut
Membre
Dernière intervention
12 septembre 2020
3
Bonjour merci beaucoup pour votre réponse. Comme vous me l'avez conseillez j'ai utilisé le requestAnimationFrame pour l'animation de mon block (je voudrais animer une plateforme(ici le block) de gauche vers la droite pour faire un jeu de plateforme donc sur l'exemple du site https://developer.mozilla.org/fr/docs/Web/API/Window/requestAnimationFrame j'ai modifié l'exemple pour mon projet mais cela ne marche pas(l'image ne s'affiche plus). Pouvais vous m'aider s'il vous plaît.
window.requestAnimationFrame = window.requestAnimationFrame

let start = null

//mon image
let block = document.getElementById("block")

function step(timestamp) {
let progress
if (start === null) start = timestamp
progress = timestamp - start
block.style.left = Math.min(progress/10, 200) + "px"
if (progress < 2000) {
requestAnimationFrame(step)
}
}

requestAnimationFrame(step)