Roue de fortune de l'image en HTML5 (par exemple, roue de roulette)?

Quelle est la meilleure façon d'imiter une roue de roulette tournante en HTML5?

La roue doit être contrôlable par une entrée (c'est à dire, la vitesse de filage basé sur certains saisie de l'utilisateur). La roue des étiquettes flou que la roue tourne vite, mais comme la rotation ralentit, les étiquettes sur la roue et deviennent de plus en plus lisible.

Sont là HTML5 bibliothèques qui le soutiennent, ou de faire les animations doivent être programmés à la main?

Cela doit également être pris en charge sur les appareils iOS.

InformationsquelleAutor Crashalot | 2011-10-05
  1. 16

    Il peut être fait en quelques lignes de CSS.

    Flou est un effet d'optique, il n'a pas besoin d'être simulé.

    • Merci! Une question que nous n'avons pas de poser, c'est quelle est la meilleure façon de déterminer le nombre a été "débarqué sur?" Est-il un moyen simple pour faire cela? Une approche que nous pouvons penser est de garder la roue encore et de faire un pointeur à l'intérieur de la rotation de la roue autour de. Basé sur la façon dont le pointeur de terres, nous pouvons déterminer le nombre était de débarquer sur. Pas idéal, mais il serait fonctionnel.
    • Si le pointeur est à zéro degrés au nord de la roue, et un certain nombre de la section de l'angle est égal à, disons, de 10 degrés, alors si vous faites tourner la roue de 400 degrés, il est le point lors de la 4e numéro ((400 - 360) / 10).
    InformationsquelleAutor katspaugh
  2. 9

    Si quelqu'un est intéressé à faire cela à l'aide de Javascript et HTML5 canvas, voir http://www.dougtesting.net/winwheel/index.html pour un exemple. Truc Cool, c'est que le code est disponible pour téléchargement trop.

    • C'est une excellente démonstration. Il pourrait être utile de fournir un extrait de que ici dans le cas où vous déplacer ou supprimer cette page de démonstration à un certain moment dans l'avenir.
    • Bienvenue à Débordement de Pile! Merci de poster votre réponse! Assurez-vous de lire le FAQ sur l'Auto-Promotion avec soin. Notez également qu'il est obligatoire que vous publiez un avertissement à chaque fois que vous accéder à votre propre site/du produit.
    InformationsquelleAutor Zarock
  3. 2

    Vous pouvez utiliser jfortune, c'est un plugin jquery.
    https://github.com/tehsis/jfortune

    Et je sais que cela pourrait être un peu différent à partir d'un tour de roue de roulette de point de vue... mais fantaisie-jqyery-plugin a l'air très intéressant et personnalisable.

    http://www.jqueryscript.net/animation/Fancy-jQuery-Plugin-For-Roulette-Image-roulette-js.html

    InformationsquelleAutor mario.ecc