2012-01-12 25 views
0

キャンバス上の3つのスポットをクリックして、ユーザーがクリックした場所ごとに3つの円で2つの線分を描きたいと思っています。ユーザーがボタンをクリックすると、ユーザーがクリックした最初の円に赤い円が現れ、次にユーザーが描いたパスが続きます。 2番目のサークル、最後に最後のサークルに達すると、それらのポイントに達すると、何らかのアラートがポップアップします。キャンバスで円を描く方法は?

+0

で実行できます。試行したコードを表示してください。 –

答えて

2

私はあなたのためにこれをすべて行うつもりはありません。ただし、ここでは始点です

1)キャンバスでマウスイベントをキャプチャできることを確認してください。この質問は、あなたが始めるでしょうHtml5 canvas and jquery

2)あなたがコーディングしている問題を理解してください。あなたはそのようなデータ構造を必要とする:

points{ 
    a : {x : None, y : None}, 
    b : {x : None, y : None}, 
    c : {x : None, y : None} 
}; 

3)毎回ユーザーがクリック、aを更新し、その後、b、その後、ccに到達したら、三角法を使用して描画される線をアニメーション化します。これはsetTimeoutまたはsetInterval