html5キャンバスは余分なデータでサークル変数を描画します

Question

私は基本的に円でスポットをマークする座席図を作成しようとしています。そして、onMouseoverは人の姓、名字、その他の情報を含むツールチップを表示します。私は地域/ツールチップのサポートのためにKinetic.JSを使用している可能性が高いので、チュートリアルを頻繁に参照するようです。

名前の情報だけでなく、サークルの詳細も含む1人あたりの変数を1つ作成したいと考えていますが、これは簡単かもしれませんが、一般的にはJSには初めてです。実際に単にこれを動作するようには思えないので、私は理論としてより出ているものです：

Function seat(centerX, centerY, radius, fillStyle, firstName, lastName, id) { 
    This.centerX=ctx.arc(centerX); 
    This.centerY=ctx.arc(centerY); 
    This.radius=ctx.arc(radius); 
    This.fillStyle=ctx.fillStyle; 
    This.firstName=firstName; 
    This.lastName=lastName; 
    This.id=id; 
} 
var johnSmith = new seat (100, 120, 10, #999, John, Smith, 123); 

       var canvas = document.getElementById("seatingChart"); 
       var ctx = canvas.getContext("2d"); 

    ctx.beginPath(); 
    ctx.arc(johnSmith); 
    ctx.moveTo(…); 
    ctx.arc(nextPerson); 
    ect… 

私が知っているに円が正しく動作するためには、私は、アークの最後の部分を持っている必要がありますinfo somewhere ctx.arc(.., .., .., 0, 2 * Math.PI, false);私はすべての変数のためにそれを繰り返す必要はありませんので、どこにすべきかわかりません？

誰かがこの設定を適切な方法で設定するのを手伝ってくれるでしょうか？私はあなたがそのようなJavaScriptで関数を呼び出すことはできません

おかげ

Answer 1

jcubedさんのように、「オブジェクトをそれらのプロパティを含む弧に渡すことはできません。あなたは何ができるか

は次のように独自の関数を作成することです：

context.fillPerson = function(p){ 
    this.fillStyle = p.fillStyle; 
    this.arc(p.centerX,p.centerY,p.radius,0,2*Math.PI,false); 
    this.fill(); 
} 

あなたはこのようにそれを行う場合は、簡単に将来的に人を描画する方法を変更することができます。

あなただけあなたが行うことができ、一般的にcriclesを描くことが容易になりたい場合は、次の

context.circle = function(x,y,r){ this.arc(x,y,r,0,2*Math.PI,false); } 

Answer 2

..現在、JSブックを通じて自分の道を働いていますが、単に適切にこの設定を取得するように見えることはできません。 ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);のようにカンマ区切りのパラメータを指定する必要があります。 できませんこれらのプロパティを含む弧にオブジェクトを渡すことはできません。

は行います

ctx.beginPath(); 
ctx.fillStlye = johnSmith.fillStyle; 
ctx.arc(johnSmith.centerX, johnSmith.centerY, johnSmith.radius, 0, 2 * Math.PI, false); 
ctx.fill(); 

すべての人のために、同じようにループか何かのために。