[Methode]scrollIntoView appliqué au canvas
Résolu/Fermé
BabaProg
Messages postés
71
Date d'inscription
jeudi 25 octobre 2018
Statut
Membre
Dernière intervention
2 avril 2022
-
Modifié le 19 mars 2020 à 13:41
SouperMario - 22 mars 2020 à 15:47
SouperMario - 22 mars 2020 à 15:47
A voir également:
- Js scrollintoview
- Arrondi js - Forum Javascript
- Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Photoshop
- Pixlr - Forum Graphisme
- Please enable js and disable any ad blocker - Forum Mozilla Firefox
- Arrondir js ✓ - Forum Windows
1 réponse
Salut,
quel est le problème?
Il suffit de détecter quand la position dépasse le bord du canvas pour changer d'image.
Ce n'est bien sûr pas un vrai scrolling(défilement en français) mais le changement d'une image donc ce ne sera pas très dynamique.
scrollIntoView est une méthode(fonction propre à un objet) des éléments HTML ce que ne sont pas les contenus d'un canvas.
Il suffit de lire la notice pour comprendre:
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Canvas ne contient pas des éléments mais des images(2D ou 3d): du dessin.
La méthode que vous citez n'a aucun rapport avec ce que vous voulez puisque elle concerne les barres de défilement d'un élément(ou de la page). Elle ne fait que centrer l'affichage d'une page web sur un élément(HTML) de la page.
Renseignez vous sur ce qu'est CANVAS afin de l'utiliser.
https://www.w3schools.com/html/html5_canvas.asp
_Citation:
"The HTML <canvas> element is used to draw graphics on a web page."
_traduction :
"L'élément HTML <canvas> est utilisé pour dessiner des scènes/images sur une page web."
Donc puisque que vous parlez de dessin il faut modifier le dessin et utiliser les méthodes associées au dessin.
Commencez donc par faire la première partie de votre projet ça vous aidera à comprendre:
" quand je déplace mon personnage '
donc dessiner à différentes positions une image en effaçant à chaque fois la précédente(et l'ensemble du canvas).
C'est bien d'avoir des projets..mais il faudrait commencer par faire quelque chose. Au départ petit et ensuite vous améliorez pour arriver à ce que vous voulez.
Vous pouvez commencer par apprendre:
https://www.qwant.com/?q=animation+avec+canvas
https://www.qwant.com/?q=faire+des+jeux+avec+canvas&t=web
Ou tout simplement des cours sur JavaScript(voir request animationFrame pour l'animation, la prog évenementielle pour l'interactivité etc...) car CANVAS c'est la visualisation uniquement(et les méthodes de dessin qui vont avec).
Une bonne série de cours sur HTML5 avec en fin de série la réalisation d'un jeu sur canvas:
https://courses.edx.org/courses/course-v1:W3Cx+HTML5.1x+4T2015/course/
Bon travail.
quel est le problème?
Il suffit de détecter quand la position dépasse le bord du canvas pour changer d'image.
Ce n'est bien sûr pas un vrai scrolling(défilement en français) mais le changement d'une image donc ce ne sera pas très dynamique.
scrollIntoView est une méthode(fonction propre à un objet) des éléments HTML ce que ne sont pas les contenus d'un canvas.
Il suffit de lire la notice pour comprendre:
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Canvas ne contient pas des éléments mais des images(2D ou 3d): du dessin.
La méthode que vous citez n'a aucun rapport avec ce que vous voulez puisque elle concerne les barres de défilement d'un élément(ou de la page). Elle ne fait que centrer l'affichage d'une page web sur un élément(HTML) de la page.
Renseignez vous sur ce qu'est CANVAS afin de l'utiliser.
https://www.w3schools.com/html/html5_canvas.asp
_Citation:
"The HTML <canvas> element is used to draw graphics on a web page."
_traduction :
"L'élément HTML <canvas> est utilisé pour dessiner des scènes/images sur une page web."
Donc puisque que vous parlez de dessin il faut modifier le dessin et utiliser les méthodes associées au dessin.
Commencez donc par faire la première partie de votre projet ça vous aidera à comprendre:
" quand je déplace mon personnage '
donc dessiner à différentes positions une image en effaçant à chaque fois la précédente(et l'ensemble du canvas).
C'est bien d'avoir des projets..mais il faudrait commencer par faire quelque chose. Au départ petit et ensuite vous améliorez pour arriver à ce que vous voulez.
Vous pouvez commencer par apprendre:
https://www.qwant.com/?q=animation+avec+canvas
https://www.qwant.com/?q=faire+des+jeux+avec+canvas&t=web
Ou tout simplement des cours sur JavaScript(voir request animationFrame pour l'animation, la prog évenementielle pour l'interactivité etc...) car CANVAS c'est la visualisation uniquement(et les méthodes de dessin qui vont avec).
Une bonne série de cours sur HTML5 avec en fin de série la réalisation d'un jeu sur canvas:
https://courses.edx.org/courses/course-v1:W3Cx+HTML5.1x+4T2015/course/
Bon travail.
