ホームページ  >  記事  >  ウェブフロントエンド  >  Canvas と SVG_html/css_WEB-ITnose の違い

Canvas と SVG_html/css_WEB-ITnose の違い

WBOY
WBOYオリジナル
2016-06-24 11:36:461234ブラウズ

正直に言うと、私は 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 アプリケーションは高速ではありません)
  • ゲームには適していませんアプリケーション
  • 声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。