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

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

SVG

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 Canvas と SVG の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) をご覧ください。