javascript - キャンバスの円と線

Question

http://jsfiddle.net/cs5Sg/

ご覧のとおり、2 つの円と 1 つの線を作ろうとしています。最初の円をクリックすると、線の位置を変更できます。2 つの質問があります。

1. 2行目を削除するには？(2 番目の円を追加した場合にのみ、2 番目の線が大きくなります。)
2. mouseupイベント後に「アニメーション」を停止するには?

Answer 1

パスは 1 つしか開始しないため、2 つの円の間の線であり、そのステートメントstartでは常に true になります。それをリスナー内に配置し、一度だけアタッチする必要があります。ifmousemove

これにより円弧が作成されます。

context.arc(x,y,radius,0,2*Math.PI);

そして、これは同じパス上に円弧を作成するため、最後の端からこの端までの線が作成されます。

context.arc(x1,y1,radius,0,2*Math.PI);

代わりに、それらを別々のパスに配置してください。

context.beginPath();
context.arc(x,y,radius,0,2*Math.PI);
context.stroke();

context.beginPath();
context.arc(x1,y1,radius,0,2*Math.PI);

context.moveTo(x,y);
context.lineTo(x1,y1);
context.stroke();

更新された jsFiddle は次のとおりです。