2011-10-05 251 views
5

在HTML5中模擬旋轉輪盤賭的最佳方式是什麼?HTML5中的旋轉輪圖像(例如輪盤)?

車輪旋轉應該可以通過一些輸入(即基於某些用戶輸入的旋轉速度)來控制。車輪標籤應該隨着車輪快速旋轉而變模糊,但隨着旋轉變慢,車輪上的標籤變得越來越可讀。

是否有HTML5庫支持這個,或者是否需要手動設置動畫?

這也需要在iOS設備上支持。

回答

14

它可以在幾行CSS中完成。

模糊是一種光學效應,它不需要模擬。

+1

謝謝!但是,我們沒有問的一個問題是,確定哪個數字「登陸?」的最佳方法是什麼?有沒有簡單的方法來做到這一點?我們可以想到的一種方法是保持車輪不動,並在車輪內旋轉指針。根據指針落地的方式,我們可以確定登錄的是哪個數字。不理想,但它會起作用。 – Crashalot

+1

如果指針在車輪以北0度,並且數字段的角度等於例如10度,那麼如果將車輪旋轉400度,則指向第四個數字('(400-360)/ 10') 。 – katspaugh

6

如果有人對使用Javascript和HTML5畫布進行此操作感興趣,請參閱http://www.dougtesting.net/winwheel/index.html的示例。很酷的事情是代碼也可以下載。

+0

這是一個很棒的演示。在您將來某個時候移動或刪除演示頁面的情況下,從這裏提供一個片段可能會很有用。 – Marvo

+3

歡迎來到Stack Overflow!感謝您發佈您的答案!請務必仔細閱讀[自助推廣常見問題](http://stackoverflow.com/faq#promotion)。另請注意,每次鏈接到您自己的網站/產品時,您都必須*發佈免責聲明。 –