HTML5キャンバスの上に対話的に図形を描画する方法は？

Question

HTML5キャンバスの上に四角形や円などのマウスカーソルを使って図形を描く必要があります。サイズを変更できるようにする必要があります。ユーザーが描画を終了したら、キャンバス内の図形の座標を取得する必要があります。

JavaScriptを使用してこれを実現するにはどうすればよいですか？

ありがとうございます。

Answer 1

キャンバスは、描画しているオブジェクトの性質についてはまったく分かっていません。つまり、arcメソッドを呼び出すよりも、スクリーン上のピクセルの束になるだけです。

ここには、キャンバスの上に独自のオブジェクトモデルラッパーを書くことができます。 何かを描画するたびに、オブジェクトの情報（シェイプ、座標など）を必要に応じて格納する必要があります。これはかなりまともなアプローチですが、警告する必要があります。

第2のアプローチは、キャ​​ンバスの代わりにSVGを使用し、ボックスのオブジェクトモデルを使用する方法です。

Answer 2

JavaScriptライブラリPaper.jsがあなたにとって興味深いかもしれません。ウェブサイトの紹介を言い換えて - 「これはHTML 5キャンバスを使ったベクトルグラフィックスフレームワークを提供する」