7

いくつかの要素をクリックすると、線と JavaScript アクションで接続された角丸長方形で構成される図を描画する必要があるプロジェクトを開始したいと考えています。これは、最新のすべてのブラウザーで機能する必要があります。

SVG と HTML5 Canvas の両方がこれを行うことができるように見えるので、何が最適なのだろうか.

また、車輪を再発明したくないので、そのようなことを行うライブラリがあれば知りたいです。Raphaël やその他の JavaScript 描画ライブラリを調べましたが、必要な機能がすべて揃っているわけではありません。Google の API にはそのようなツールがありますが、非常に限られています。

4

1 に答える 1

16

SVG を使用すると、保持モードの描画 API として、イベント リスナーを特定の要素に直接アタッチしたり、特定の要素のプロパティを変更したり、ページを魔法のように更新したりできるためです。さらに、ベクターベースの形式であるため、解像度に依存しません。

それに比べて、HTML5 Canvas はnon-retained-mode(即時モードとも呼ばれる) 描画 API です。描画するすべてのピクセルは、キャンバス上の他のすべてのピクセルとブレンドされ、元の形状の概念はありません。さらに、ラスターベースの形式であるため、さまざまな表示サイズに合わせて描画コマンドを調整するには、追加の作業を行う必要があります。

一般に、次のことが必要な場合に限り、Canvas を使用する必要があります。

  1. ピクセルの直接設定 (ぼかし、キラキラ効果など)、または
  2. ピクセルを直接取得する (例: ユーザーの描画を読み取って PNG として保存する、画像の一部をサンプリングして視覚的なオーバーラップを検出する)、または
  3. あまり移動しない、または個々のイベントを追跡しない膨大な数の「オブジェクト」 (SVG は数千のオブジェクトで再描画が遅くなる可能性があります)。

どちらか一方だけを選択する必要はないことにも注意してください。キャンバスに SVG を描画できます。SVG にはビットマップ (画像) を含めることができます。経由で HTML5 Canvas を SVG に含めることもできます<foreignElement>。複数のレイヤー化されたキャンバスと透明な背景を持つ SVG 要素を含む単一の HTML ページを作成し、それぞれの出力を混在させることができます。

于 2012-04-25T18:50:09.357 に答える