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畫布這樣做感興趣，請參閱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