ホームページ > 記事 > ウェブフロントエンド > 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 に基づいています。つまり、SVG DOM 内のすべての要素が利用可能です。 JavaScript イベント ハンドラーを要素にアタッチできます。
SVG では、描画されたすべての形状がオブジェクトとみなされます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。
Canvas
キャンバスはピクセルごとにレンダリングされます。
キャンバスでは、グラフィックが描画されると、ブラウザーの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。
Canvas と SVG の比較
キャンバス