Comment créer une barre de vie circulaire ?

[ToraTora]

Salut,

je voudrais créer une barre de vie circulaire comme ceci :


Lorsque le personnage a 100% de vie, le cercle vert est remplit.
Plus la vie descend, moins le cercle est remplit.


Je n'ai aucune idée de par où commencé ...

Peut être avec GD en créer des cercles pleins superposés ? Mais je n'ai pas envie de créer l'image à chaque chargement de la page...
Avec CSS avec border-radius ? Mais ça ne sera pas compatible avec tous les navigateurs..
En javascript ?

Quelqu'un a-t-il déjà réfléchi à ce genre de chose ?

[php_addict]

je ne suis pas expert en ce genre de chose mais:

côté client:

- flash
- Javascript, il y a des librairie graphique pour dessiner, cela te permettrait d'afficher <div class="FaisMoiUnCercle">97%</div> et si javascript est activé cela te transforme ta div en dessin

côté serveur:

- php, librairie graphique, tu pourrait très bien mettre tes images en cache (100% => 100 images)

Le mieux je pense serait en JS: http://www.google.fr/search?q=dessin+vec...javascript

[Argorate]

Si tu veux que la jauge circulaire diminu a la meme vitesse des deux coté de manière symétrique, c'est plutot facile : http://www.jeuweb.org/showthread.php?tid...2#pid67152 , si tu veux faire comme sur l'image que tu donnes, faut y reflechir d'avantages^^

[Roworll]

RaphaelJS peut t'apporter une solution.
Petit exemple.

[Argorate]

J'adore ^^

Ca a l'air sympa

[ToraTora]

Merci Roworll
je suis tombé dessus hier

Je vais regarder ça de plus près !

[Argorate]

Tu me diras si c'est compliqué a mettre en place, je suis curieux, ça pourait permettre des trucs sympa