Spin wheel image in HTML5 (e.g., roulette wheel)?

Question

What's the best way to emulate a spinning roulette wheel in HTML5?

The wheel spinning should be controllable by some input (i.e., speed of spinning based on some user input). The wheel labels should blur as the wheel spins fast, but as the spinning slows, the labels on the wheel become more and more readable.

Are there HTML5 libraries that support this, or do the animations need to be programmed by hand?

This also needs to be supported on iOS devices.

Answer 1

It can be done in a few lines of CSS.

• http://jsfiddle.net/YNBxz/1/ – CSS-only (see in Chrome or Safari).
• http://jsfiddle.net/YNBxz/2/ – with some JavaScript, to demonstrate how to customize the animation.

Blurring is an optical effect, it doesn't need to be simulated.

Answer 2

If anyone is interested in doing this using Javascript and HTML5 canvas, see http://www.dougtesting.net/winwheel/index.html for an example. Cool thing is the code is available for download too.

Answer 3

You can use jfortune, it is a jquery plugin. https://github.com/tehsis/jfortune

And I know that this could be a bit different from a round/wheel roulette perspective... but fancy-jqyery-plugin looks very interesting and customizable.

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