Balise <canvas> : dessin progessif de courbe.

Bonjour à tous,

je me heurte à un nouveau problème avec HTML5.
En gros, ce que je dois faire peut se décrire comme suit :
- Un bouton "play" en bas.
- Une "zone de dessin", comme un repère orthonormé, ayant son "0,0" en bas à gauche.
- Lorsque l'utilisateur appuie sur "play", il lance une animation : il s'agit par exemple d'une voiture qui accélère, et sur le fond de l'animation, en transparence, on peut observer une courbe représentant la vitesse actuelle de la voiture. L'abscisse du point actuel dessiné par la courbe, est le même que celui de la voiture...

Un petit schéma (très simplifié...):
http://nsa31.casimages.com/img/2014/01/30/140130115632294417.jpg


J'hésite à utiliser la balise canvas ou CSS3 (animations...), mais vu qu'il y a des fonctionnalités telles que : si je clique sur l'image, la voiture revient au niveau de l'abscisse du clic... Je pense que le canvas s'y prête mieux.

Savez vous comment eje dois m'y prendre pour faire un tel dessin? Qui "évolue"?

Merci en tout cas!

Salut,

Html/css ça doit être possible. Sinon, un truc en SVG avec un peu de JS.

Salut,
tu as un bon tuto ici
Ça part de la base et ça fini vers les animations, je trouve pas mal pour comprendre comment cela fonctionne. Tu devrais pouvoir adapté sans trop de difficulté
Modifié par mathieu1004 (31 Jan 2014 - 13:20)

Hello !

Je partirai sur du SVG + Javascript moi aussi.
Un petit exemple rapide : http://marion-maxime.com/Divers/test_svg/svg.html

Adapté d'une réponse trouvée sur un forum (le lien m'échappe, désolé).

Le seul pré-requis : la courbe à dessiner est pré-existante (non calculée), dessinée depuis Gimp, exporter au format SVG (clique droit sur le chemin, exporter le chemin) et j'ai copié le code du path dans ma page HTML.

Ensuite c'est tout bête, un timer pour faire évoluer dans le temps la portion de la courbe à tracer, et la position de la voiture est retournée à partir de la coordonnée sur X du dernier point tracé.