Canvas と SVG_html/css_WEB-ITnose の違い

正直に言うと、私は Canvas を使って簡単なグラフィックを描いただけで、複雑なグラフィックについては理解していません。以前のインタビューでそれらについて質問されたため、ここにマークを付けておきます。後で深めてください。

以下のコンテンツはすべて w3school からのものです

http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp

ゴージャスな分割線のふりをします

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 アプリケーションは高速ではありません)

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