ルーレットホイール（JavaScript）

Question

私はジャバスクリプトでルーレットホイールを構築しようとしています。

私はこの例を見つけました：http://www.switchonthecode.com/tutorials/creating-a-roulette-wheel-using-html5-canvasしかし、私は見て&感じる非常にひどいです。

私のルーレットはオプションが限られているので、イメージを使用して上に適切な角度でテキストを配置することを考えていました。ホイールを回転させるとき、イメージとテキストを回転させるだけです。

これは良いアプローチですか？より良いアプローチがいくつかありますか？

Answer 1

css3 rotationでも可能ですが、新しいブラウザでのみ動作します あなたはさらにうまくいくことができます。穴のルーレットのホイールをSVGにして、アニメーションをサポートしていて、それをJavaScriptでプログラミングすることができます。

Answer 2

jQueryは不要です。この例では、HTML5のCanvas要素を使用しています。この要素は、FlashまたはSilverlightを使用せずに行うことができる唯一の方法です。コード内の最初の配列、または少し微妙な微妙なニュアンスを使用して色をカスタマイズできます。

Answer 3

SVG（スケーラブルベクターグラフィックス形式）イメージを使用して回転できます。

Answer 4

私は試したモバイルブラウザで動作する練習としてhttp://roulette.dabase.com/を書きました。

Answer 5

私は実際に私のサイトで、あまりにもずっと前に同様のミニゲームを実装しました。キャンバスなし、SVGなし、jQueryなし

私はボードのための簡単なイメージ（より具体的にはbackground-image）を使用し、ボールになるように<div>を配置しました。

<div id="board"><div></div></div> 

CSS：次に、このJavaScriptが回転したときにボールを配置するために使用される

#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; 
} 

：

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)"; 
} 

これは、古いブラウザでは、ホイールの周りに回転するボールになります。より新しいブラウザーでは、ボード全体が回転している間、ボールは所定の位置に留まります（ボーダーシェーディングが回転します）。変換で何か違うことがあれば、もちろん2つの組み合わせを使用することができます（例えば、"rotate(-"+(angle/2)+"rad)"）

Answer 6

私は、すばやく簡単に何かを作成するという最良のアプローチは、既存のJavascriptライブラリを使用することです回転賞/勝利ホイールを作成します。

私はWinwheel.jsと呼ばれるJavascriptライブラリの作成者です。これは特にこの目的のためです。 http://www.dougtesting.net

私のWinwheel.jsの大きな特長の1つは、セグメントラベル用のコード描画テキストでホイールの顔にグラフィック豊かなイメージを混在させることができるということです。構成可能なテキストの柔軟性があります。

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"; 

私が作成したhttp://dougtesting.net/winwheel/docs/tut9_creating_with_an_image

おかげで、 ダグ