Spin Wheel Image In Html5 (e.g., Roulette Wheel)?

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 w

Solution 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.

Solution 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.

Solution 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