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