HTML 5 キャンバスと SVG の比較

Canvas と SVG ではどちらもブラウザーでグラフィックを作成できますが、根本的に異なります。

SVG (推奨学習: html チュートリアル)

SVG は、次のメソッドを使用します。 XML 2D グラフィックスを記述するための言語。

SVG は XML に基づいています。つまり、SVG DOM 内のすべての要素が利用可能です。 JavaScript イベント ハンドラーを要素にアタッチできます。

SVG では、描画された各グラフィックはオブジェクトとみなされます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。

Canvas

Canvas は JavaScript を使用して 2D グラフィックを描画します。

キャンバスはピクセルごとにレンダリングされます。

キャンバスでは、グラフィックが描画されると、ブラウザの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。

Canvas と SVG の比較

次の表に、Canvas と SVG の違いをいくつか示します。

キャンバス

解像度依存

イベント ハンドラーのサポートなし

テキスト レンダリング機能が弱い

結果のイメージを .png または .jpg 形式で保存する機能

多くのオブジェクトが頻繁に再描画されるグラフィックスを多用するゲームに最適です

SVG

解像度に依存しない

イベント ハンドラーをサポート

大きなレンダリング領域を持つアプリケーション (Google マップなど) に最適

非常に複雑 レンダリングが遅くなります (過度に使用するアプリケーション) DOM は高速ではありません)

ゲーム アプリケーションには適していません

以上がHTML 5 キャンバスと SVG の比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。