Изображение колеса вращения в HTML5 (например, колесо рулетки)?

Question

Как лучше всего эмулировать вращающееся колесо рулетки в HTML5?

Вращение колеса должно управляться некоторым вводом (то есть, скорость вращения основывается на некотором пользовательском вводе). Метки колеса должны размываться, поскольку колесо вращается быстро, но по мере замедления вращения метки на колесе становятся все более и более читабельными.

Существуют ли библиотеки HTML5, которые поддерживают это, или анимацию нужно программировать вручную?

Это также должно поддерживаться на устройствах iOS.

Answer 1

Это можно сделать в несколько строк CSS.

• http://jsfiddle.net/YNBxz/1/ - только для CSS (см. В Chrome или Safari).
• http://jsfiddle.net/YNBxz/2/ - с некоторым JavaScript, чтобы продемонстрировать, как настроить анимацию.

Размытие - это оптический эффект, его не нужно моделировать.

Answer 2

Если кому-то интересно сделать это с использованием Javascript и HTML5 canvas, см. Пример http://www.dougtesting.net/winwheel/index.html.Круто, код доступен для скачивания тоже.

Answer 3

Вы можете использовать jfortune, это плагин jquery. https://github.com/tehsis/jfortune

И я знаю, что это может немного отличаться от перспективы рулетки с круглым колесом ... но fancy-jqyery-plugin выглядит очень интересно и настраиваемо.

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