HTML中で、javascript で接続線を描く

excel で図形オブジェクトを
接続線で接続することが出来ます

下図の四角Ａ、Ｂを動かしても
自動で着いていく接続線

―――――　　　　　　　　　―――――
｜　　　　　｜　　　　　　　　｜　　　　　｜
｜四角Ａ　｜―――――｜四角Ｂ　｜
｜　　　　　｜　接続線　　｜　　　　　｜
―――――　　　　　　　　―――――

prototype,jquery 等のライブラリで、できるものはあると思いますが
あくまで自分の勉強として使いたいので

具体的なコードがあるサイトを探しています

------------------------------
（DIVタグで四角Ａ、Ｂは作成）
1.<button>　などで接続線描ける状態にする、十字カーソル等
2.四角Ａで、mousedown
3.mousemove で四角Ｂに、マウス移動
4.mouseup で、四角Ａ、Ｂを接着する接続線を描く
------------------------------

接続線はSVG のＬＩＮＥなどを使いたいと思いますが
今回は勉強なので、接続線はHTMLのタグでもかまいません

四角の接続部分を認識して、別の四角の接続部分に
接続線を描く、コードを知りたいと思います

このようなコードのサンプルページを知っている方
既に自分でjavascriptのコードを書いた方は

教えてください

よろしく、お願いします

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2014/05/01 11:54

通常はjava,Flash,Silverlightを使うところでしたが、今後はHTML5のcanvasを使うことが主流になるでしょう。

現在の最新ブラウザはどれも対応しているはずです。

＞接続線はSVG のＬＩＮＥなどを使いたいと思いますが
　こちらは、ベクターになります。canvasはビットマップです。

　cnvas要素内にjavascriptで絵を描いていく。
　ユーザー側の入力・操作をjavascriptで取得して書き直す

と言う流れになるでしょう。

　⇒html5 canvas お絵かき - Google 検索( https://www.google.co.jp/search?q=html5%20canvas … )