[CANVAS] translate avec une image
Résolu/Fermé
BabaProg
Messages postés
72
Date d'inscription
jeudi 25 octobre 2018
Statut
Membre
Dernière intervention
2 avril 2022
-
14 mars 2020 à 23:47
BabaProg Messages postés 72 Date d'inscription jeudi 25 octobre 2018 Statut Membre Dernière intervention 2 avril 2022 - 15 mars 2020 à 10:23
BabaProg Messages postés 72 Date d'inscription jeudi 25 octobre 2018 Statut Membre Dernière intervention 2 avril 2022 - 15 mars 2020 à 10:23
A voir également:
- [CANVAS] translate avec une image
- Image iso - Guide
- Canvas gratuit - Télécharger - Divers Photo & Graphisme
- Google translate - Télécharger - Traduction
- Comment agrandir une image - Guide
- Acronis true image - Télécharger - Sauvegarde
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
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
BabaProg
Messages postés
72
Date d'inscription
jeudi 25 octobre 2018
Statut
Membre
Dernière intervention
2 avril 2022
6
15 mars 2020 à 10:23
15 mars 2020 à 10:23
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)
