リアルタイムモードと保持モードを區(qū)別することが重要です。 HTML5キャンバスは前者の例であり、SVGは後者の例です。

リアルタイムモードと保持モードの違い、およびそれぞれのキャンバスとSVGの他の特定の機(jī)能に基づいて、別のテクノロジーではなく1つのテクノロジーを使用する場(chǎng)合、プロジェクトの目標(biāo)により適している場(chǎng)合があります。

要素を使用してはならないことを明示的に推奨しています。 <canvas></canvas> たとえば、グラフィカルに豊富な要素の場(chǎng)合、最良のツールはHTMLとCSSではなく、

<canvas></canvas>domおよびdomフレームワークは、情報(bào)、特にテキスト情報(bào)を表示するのに適しています。対照的に、キャンバスは寫(xiě)真です。テキストはキャンバスに追加して応答性を高めることができますが、テキストはDOM上のように簡(jiǎn)単に選択または検索することはできません。長(zhǎng)いスクロールテキストページまたはテキストと畫(huà)像ページは、DOMにとって最適です。 DOMは、ソーシャルメディアサイト、フォーラム、ショッピング、および使用に慣れているすべての情報(bào)アプリに最適です。 - 「JavaScript Canvasライブラリまたはフレームワークを使用するタイミング」

では、

を使用しない場(chǎng)合の明確な例を次に示します。しかし、

<canvas></canvas>（Sarah Drasnerのツイートスクリーンショットはここに埋め込む必要があります）<canvas></canvas>

Alvin Wanは、描畫(huà)されたオブジェクトの數(shù)とオブジェクトまたはキャンバス自體のサイズに基づいて、キャンバスとSVGのパフォーマンスをベンチマークしました。彼は結(jié)果を次のように要約しました： とにかく、數(shù)百または數(shù)千のオブジェクトを扱う場(chǎng)合、DOMレンダリングのオーバーヘッドはより明白です。ただし、キャンバスもSVGもオブジェクトサイズの影響を受けません。最終的な統(tǒng)計(jì)を考えると、キャンバスはパフォーマンスの面で明確な利點(diǎn)を提供します。

ゲームと生成アート

レイトレースを使用して、畫(huà)像プレーンのピクセルの光線(xiàn)パスを追跡し、仮想オブジェクトとの遭遇をシミュレートすることにより、畫(huà)像を埋めることができます...レイトレースによって達(dá)成される効果...単純なベクトルグラフィックの畫(huà)像は、寫(xiě)真のようなフィルターを適用して、赤目を除去します。 ——SVGおよびキャンバス：選択方法、Microsoft Docs。

要素で最もよく実行されることを意味するわけではありません。実際、CPUへの圧力は非常に高いため、ブラウザが応答を停止する可能性があります。

小さな表面に多數(shù)のオブジェクトを描畫(huà)します

別の例は、アプリケーションが、比較的小さな表面に多數(shù)のオブジェクトを描畫(huà)する必要があるシーンです。これは、天候パターンのグラフィカルな表現(xiàn)など、非対話(huà)的なリアルタイムデータの視覚化などです。

ビデオのピクセル置換

このHTML5の醫(yī)師記事に示されているように、キャンバスを使用するのに適したもう1つの例は、ビデオの背景色を別の色、別のシーン、または畫(huà)像に置き換えることです。

HTML5キャンバスとは何ですか？ 一方、多くの場(chǎng)合、キャンバスはSVGに比べて最良の選択ではないかもしれません。

スケーラビリティ

スケーラビリティが利點(diǎn)であるほとんどのシナリオは、キャンバスの代わりにSVGをより適切に使用します。高忠実度、建築およびエンジニアリングの図面、組織の図面、生物學(xué)的図面などの複雑なグラフィックは、この狀況の例です。

SVGで描畫(huà)したり、畫(huà)像を拡大したり、畫(huà)像を印刷すると、すべての詳細(xì)を保持して非常に高いレベルの品質(zhì)を?qū)g現(xiàn)します。また、これらのドキュメントをデータベースから生成することもできます。これにより、SVGのXML形式をこのタスクに最適にします。

さらに、これらのグラフィックは通常、

インタラクティブです。たとえば、チケットをオンラインで予約するときは、シートマップを検討してください。これにより、SVGなどのグラフィックシステムを保持するための優(yōu)れたユースケースになります。

つまり、CreateJやZim（拡張createjs）などの優(yōu)れたライブラリを使用すると、開(kāi)発者はマウスイベントを統(tǒng)合し、テストをヒットし、マルチタッチジェスチャー、ドラッグアンドドロップ機(jī)能、コントロール、およびより迅速に作成に基づいて作成できます。キャンバス。

アクセシビリティ

キャンバスグラフィックスのアクセシビリティを改善するためのいくつかの手順を?qū)g行できますが、優(yōu)れたキャンバスライブラリ（ZIMなど）はプロセスをスピードアップするのに役立ちます - アクセシビリティに関してはキャンバスは良くありません。キャンバスの表面に描くのは、支援技術(shù)または検索エンジンロボットが読み取りや解釈できないピクセルの束です。これは、SVGのもう1つの好ましい領(lǐng)域です。SVGはXMLだけで、人間と機(jī)械の両方が読み取られます。

javascriptに依存しない

アプリケーションでJavaScriptを使用したくない場(chǎng)合、Canvasは最良の選択ではありません。実際、

要素を使用する唯一の方法は、JavaScriptを使用することです。代わりに、Adobe IllustratorやInkscapeなどの標(biāo)準(zhǔn)的なベクトル編集プログラムを使用してSVGグラフィックを描畫(huà)できます。純粋なCSSを使用して、その外観を制御し、説得力のある微妙なアニメーションとマイクロインタラクションを?qū)g行できます。

高度なシナリオ用のHTML5キャンバスとSVGを組み合わせて

場(chǎng)合によっては、HTML5キャンバスとSVGを組み合わせることにより、アプリケーションが両方の世界を最大限に活用できます。たとえば、Canvasベースのゲームは、ベクトル編集プログラムによって生成されたSVG畫(huà)像をSpritesとして使用して、PNG畫(huà)像と比較してスケーラビリティと小さなダウンロードサイズを活用することができます。あるいは、描畫(huà)プログラムは、描畫(huà)用のSVGおよび埋め込み<canvas></canvas>要素を使用してユーザーインターフェイスを設(shè)計(jì)することができます。

最後に、Paper.jsのような強(qiáng)力なライブラリを使用すると、HTML5キャンバスの上にベクトルグラフィックスクリプトを作成でき、開(kāi)発者が両方のテクノロジーを同時(shí)に使用する便利な方法を提供します。

結(jié)論

この記事では、HTML5キャンバスとSVGの主要な機(jī)能のいくつかを調(diào)査して、特定のタスクに最適なテクノロジーを決定するのに役立ちます。

答えは何ですか？

クリス?コイエはベンジャミン?デ?コックに同意します。

この質(zhì)問(wèn)に答えるための非常に基本的な方法は、「SVGを使用できない場(chǎng)合はキャンバスを使用する」（「できない」ことを意味し、數(shù)千のオブジェクトをアニメーション化すること、各ピクセルを個(gè)別に操作するなど）です。言い換えれば、SVGはデフォルトの選択であり、キャンバスはバックアッププランです。

- ベンジャミン?デ?コック（@BDC）2019年10月2日

Dr Abstractは、インタラクティブロゴや広告、インタラクティブなインフォグラフィック、eラーニングアプリケーションなど、キャンバスで構(gòu)築するのに最適なものの多くのリストを提供します。

私の意見(jiàn)では、SVGの代わりにキャンバスを使用するのが最善である場(chǎng)合について、難しいルールと高速なルールはありません。リアルタイムモードと保持モードの違いは、HTML5キャンバスがグラフィック集約型ゲームを構(gòu)築することに関して議論の余地のない勝者であり、SVGがフラット畫(huà)像、アイコン、UI要素などに好ましいことを示しています。ただし、HTML5キャンバスには、特にさまざまな強(qiáng)力なキャンバスライブラリが提供できるものを考慮して、アプリケーションの範(fàn)囲を拡大する余地もあります。同じグラフィカルな作業(yè)で両方のテクノロジーを同時(shí)に使いやすくするだけでなく、Canvasネイティブプロジェクト（インタラクティブなコントロールやイベント、応答性、アクセシビリティ機(jī)能など）でいくつかの難しい機(jī)能を作成しました。これは、ほとんどの開(kāi)発者が使用するHTML5キャンバスのより興味深い使用への扉を開(kāi)きます。

キャンバス対SVG

のFAQ

（FAQパーツをここに含めて、元のコンテンツに従って書(shū)き直し、簡(jiǎn)潔で明確にし、より自然な言語(yǔ)表現(xiàn)を使用する必要があります。）