我想在javascript中構建一個輪盤賭輪。在javascript中的輪盤賭
我發現這個例子：http://www.switchonthecode.com/tutorials/creating-a-roulette-wheel-using-html5-canvas但我覺得看起來&感覺不是很糟糕。
由於我的輪盤賭的選項數量有限，我正在考慮使用圖片，然後以適當的角度放置上方的文字。旋轉輪子時，我只會讓圖像和文字轉動。
這是一個很好的方法嗎？有更好的方法嗎？
你也可以用css3 rotation做到這一點，但它只能在較新的瀏覽器上工作 你可以做得更好。製作孔輪盤輪SVG，它支持動畫，它可以在javascript中編程
我同意SVG。您可以使用Raphael js旋轉。即使在IE6中運行 – RedRoosterMobile
jQuery是沒有必要的。該示例是使用HTML5 Canvas元素完成的，該元素可能是您無需Flash或Silverlight就可以完成的唯一（乾淨）方式。您可以使用代碼中的第一個數組自定義顏色，或者稍微修改一下它的任何其他細微差別。
您可以使用SVG（可縮放矢量圖形格式）圖像並旋轉它。
我寫了http://roulette.dabase.com/作爲一個練習，它適用於我試過的移動瀏覽器。
我不久前在我的網站上實現了一個類似的迷你遊戲。沒有畫布，沒有SVG，沒有jQuery。
我使用了一個簡單的圖像爲板（更具體地作爲background-image），然後放置一個<div>成爲球。
<div id="board"><div></div></div>
CSS：
#board {
width:256px;
height:256px;
background-image:url('gameboard.png');
position:relative;
transform-origin:50% 50%;
}
#board>div {
position:absolute;
margin-left:-7px;
margin-top:-7px;
border:7px outset #ccc;
width:1px; height:1px;
left:248px;
top:128px;
}
那麼這個JavaScript用於在旋轉時定位球：
function placeBall(angle) {
var board = document.getElementById("board"), ball = board.children[0];
ball.style.left = (128+Math.cos(angle)*120)+"px";
ball.style.top = (128-Math.sin(angle)*120)+"px";
board.style.transform = "rotate(-"+angle+"rad)";
}
這將導致球在舊的瀏覽器周圍的車輪旋轉。在較新的瀏覽器中，當整個棋盤旋轉時，球將保持原位（但邊框陰影會旋轉）。如果你在轉換上做了不同的事情（例如，"rotate(-"+(angle/2)+"rad)"）
那麼我認爲在創建快速簡便的方面最好的方法是使用現有的Javascript庫創造旋轉獎/獲獎車輪。
我是一個Javascript庫的創建者，名爲Winwheel.js這是專門爲此目的。請參閱http://www.dougtesting.net
有關我的Winwheel.js的一個重要特性是，您可以將圖形豐富的圖像合成爲車輪表面與區段標籤的代碼繪製文本，因此如果您希望車輪看起來非常好但有可配置文本的靈活性，你可以。
下面是使用Winwheel.js完成此操作所需的代碼示例...
var myWheel = new Winwheel({
'drawMode' : 'image',
'drawText' : true, // Set this to true for text to be rendered on image.
'numSegments' : 4,
'textOrientation' : 'curved', // Set text properties.
'textAlignment' : 'outer',
'textMargin' : 5,
'textFontFamily' : 'courier',
'segments' : // Set segment text
[
{'text' : 'Television'},
{'text' : 'Mobile Phone'},
{'text' : 'Old Radio'},
{'text' : 'Computer'}
]
});
var wheelImg = new Image();
wheelImg.onload = function()
{
myWheel.wheelImage = wheelImg;
myWheel.draw();
}
wheelImg.src = "wheel_image.png";
有全套我的網站上的教程講解如何使用Winwheel.js的，但對圖片的車輪特定的人可以在這裏找到http://dougtesting.net/winwheel/docs/tut9_creating_with_an_image
感謝， DOUG
我創建使用拉斐爾的輪盤賭在http://www.guesttime.com/members/ledlogic/roulette/index.html – ledlogic