私は、いくつかの要素をクリックすると、線で結ばれた丸い四角形とJavaScriptアクションからなる図を描画する必要があるプロジェクトを開始したいと考えています。これはすべての最新のブラウザで動作する必要があります。SVG対HTML5キャンバスの図
SVGとHTML5 Canvasの両方でこれを行うことができるように思われるので、何が最善であるのだろうかと思います。
また、私は車輪を再発明したくないので、そういうことをしているライブラリがあれば知りたいです。私はRaphaëlと他のJavaScript描画ライブラリを見ていましたが、必要な機能をすべて提供していません。 GoogleのAPIにはこのようなツールがありますが、非常に限られています。 — として保持モードはAPI —を描くため
使用SVGあなたは、特定の要素に直接イベントリスナーを添付して、特定の要素のプロパティを変更し、ページが魔法のように更新することができます。さらに、ベクトルベースのフォーマットとして、解像度に依存しない。
HTML5キャンバスは、比較として、non-retained-mode（別名即時モード）描画APIです。描画するすべてのピクセルは、キャンバス上の他のすべてのピクセルとブレンドされ、元の形状の概念はありません。さらに、ラスターベースのフォーマットとして、異なる表示サイズに合わせて描画コマンドを取得するには、余分な作業が必要になります。一般的に
、あなたはキャンバスを場合に使用する必要があり、あなたが必要な場合にのみ：
どちらか一方のみを選択する必要はありません。あなたはキャンバスにSVGを描くことができます。 SVGにビットマップ（画像）を含めることができます。 HTML5 Canvasを<foreignElement>経由でSVGに組み込むこともできます。透明な背景を持つ複数のレイヤー付きキャンバスとSVG要素を持つ単一のHTMLページを作成し、それぞれの出力を混在させることができます。
ありがとうPhrogz、しかし、私は、例えば、コネクターを持つノードを追加して、リフレッシュしたり、サーバーを巡回してSVG全体を再生成することができるかどうか分かりません。 – peter
@peter JavaScriptは、 SVG DOMのオンザフライ、操作の追加、ノードの削除（HTMLのように） Webブラウザーは自動的に適切な表示を再描画します（HTMLと同様）。対照的に、キャンバスでは、アイテムを移動すると、すべての描画コマンドをクリアして再発行する必要があります。これは、あなたのために仮想オブジェクトを管理するライブラリでは難しくありません。私の編集を参照してください。 – Phrogz
@peter、phrogzが正しければ、javascriptでhtmlを操作できるようにsvgを操作することもできます。なぜbackbone.jsを使うこともできます！ :) – RGB
どのような図表ですか？どのくらい正確に？そのライブラリには現在どのような機能がありませんか？ –
サイズは調整可能でなければなりません。図は系図プログラムのためです – peter
私はあなたでしたが、私はsvgと一緒に行き、backbone.jsのようなものでビルドします。この方法でオブジェクトのテンプレートを作成し、 – RGB