これまでのところ、SVGとキャンバスの主な機能が要約されています。これらはすべて、HTML5でサポートされている2Dグラフィックスディスプレイテクノロジーであり、すべてベクターグラフィックスをサポートしています。次に、これら2つのテクノロジーを比較し、それらの強みと適用可能なシナリオを分析しましょう。
まず、2つのテクノロジーの顕著な特徴を分析し、以下の表を見てみましょう。
| キャンバス | SVG |
|---|---|
| ピクセル（dynamic.png）に基づく | 形状に基づいています |
| 単一のHTML要素 | DOMの一部になる複数のグラフィック要素 |
| スクリプトを介してのみ変更します | スクリプトとCSSを介して変更します |
| イベントモデル/ユーザーインタラクショングラニュレーション（X、Y） | イベントモデル/ユーザーインタラクションの抽象化（長方、パス） |
| 画像が小さく、オブジェクトの数が大きい場合のパフォーマンスの向上（> 10k）（または両方が満たされます） | より良いパフォーマンスオブジェクトの数が小さい場合（<10k）、より大きな画像（または両方を満たす） |
上記の比較から、キャンバスはピクセル操作に強い利点があることがわかります。 SVGの最大の利点は、その便利な対話性と操作性です。キャンバスの使用は、キャンバスのサイズ（実際にはピクセルの数）によって大きく影響を受け、SVGを使用すると、オブジェクトの数（要素の数）によって比較的大きな影響を受けます。 CanvasとSVGは、変更方法の点で依然として異なります。キャンバスオブジェクトを描画した後、スクリプトとCSSを使用して変更することはできません。 SVGオブジェクトはドキュメントオブジェクトモデルの一部であるため、スクリプトとCSSを使用していつでも変更できます。
実際、Canvasはピクセルベースのリアルタイムパターングラフィックシステムです。オブジェクトを描画した後、オブジェクトはメモリに保存されません。このオブジェクトが再度必要な場合、再描画する必要があります。 SVGは、形状ベースの保持パターングラフィックスシステムです。オブジェクトを描画した後、メモリに保存されます。このオブジェクトの情報を変更する必要がある場合、直接変更できます。この根本的な違いは、多くのアプリケーションシナリオの違いをもたらしました。
これは、次の一般的なアプリケーションでも理解できます。
高忠実度のドキュメントこの側面は理解しやすいです。スケーリング時に歪んでいない、または高品質のドキュメントを印刷する必要があるときにドキュメントを閲覧するために、通常、MAPサービスなどのSVGが推奨されます。静的画像リソースSVGは、アプリケーションやWebページの画像であろうと、大きな画像であろうと小さな画像であろうと、単純な画像によく使用されます。 SVGはDOMにロードされるか、画像を作成する前に少なくとも解析されるため、パフォーマンスはわずかに低下しますが、この効率損失はWebページのレンダリングコスト（約数ミリ秒）に比べて非常に少ないです。ファイルサイズ（ネットワークトラフィックを評価する目的）に関しては、SVG画像とPNG画像サイズはそれほど変わりません。ただし、SVGは画像形式としてスケーラブルであるため、開発者が大規模に画像を使用したい場合、またはユーザーが高DPIの画面を使用する場合、SVGを使用することは非常に良い選択です。
ピクセル操作Canvasを使用する場合、要素の対応する情報を保持せずに、描画速度を速くすることができます。特に、ピクセル操作を処理する必要がある場合、パフォーマンスが向上します。 Canvasテクノロジーは、基本的にこのタイプのアプリケーションに使用されます。リアルタイムデータCanvasは、非対話型のリアルタイムデータの視覚化に最適です。たとえば、リアルタイムの気象データ。チャートとグラフィックスSVGまたはキャンバスを使用して関連するグラフィックとチャートを描画できますが、操作性を強調したい場合、SVGは間違いなく最良の選択です。インタラクティブを必要とせず、パフォーマンスを強調していれば、キャンバスがより適しています。二次元ゲームほとんどのゲームは低レベルのAPIを使用して開発されているため、Canvasは受け入れやすくなります。しかし、実際には、ゲームシーンを描画する際には、Canvasはシェイプを繰り返し描画して配置する必要がありますが、SVGはメモリに維持され、関連属性の変更は非常に簡単であるため、SVGも適切です。Mini-Gameボードにいくつかのオブジェクトを使用してゲームを作成する場合、CanvasとSVGのパフォーマンスにはほとんど違いはありません。ただし、より多くのオブジェクトが作成されると、Canvasコードははるかに大きくなります。ゲームループが実行されるたびにキャンバスオブジェクトを再描画する必要があるため、キャンバスゲームは遅くなります。
ユーザーインターフェイス設計その相互作用が良好であるため、SVGは間違いなく優れています。 SVGの保持モードグラフィカルディスプレイを使用すると、すべてのユーザーインターフェイスの詳細をHTMLのようなタグで作成できます。各SVG要素と子要素は別々のイベントに応答できるため、複雑なユーザーインターフェイスを非常に簡単に作成できます。 Canvasでは、より複雑なコード順序でユーザーインターフェイスの各部分を作成する方法を指定する必要があります。従う必要がある順序は次のとおりです。•コンテキストを取得します。
•描画を開始します。
•各ラインの色と各塗りつぶしを指定します。
•形状を定義します。
•完全な図面。
さらに、キャンバスはキャンバス全体のイベントのみを処理できます。より複雑なユーザーインターフェイスがある場合は、キャンバスをクリックする場所の座標を決定する必要があります。 SVGは、各子供要素のイベントを個別に処理できます。
次の2つの例は、キャンバスとSVGのそれぞれの技術的利点を示しています。
キャンバスの典型的なアプリケーションは緑の画面に似ています：http：//samples.msdn.microsoft.com/workshop/samples/graphicsinhtml5/canvasgreenscreen.htmレンダリングは次のとおりです。
ページを開いた後、ページソースコードを表示できます。
このアプリケーションは、2つのビデオから別のビデオにピクセルを読み書きすることであり、コードは2つのビデオ、2つのキャンバス、1つの最後のキャンバスを使用します。一度にビデオに1つのフレームをキャプチャし、2つの別々のキャンバスを描画し、データを読み戻すことができます。
ctxsource1.drawimage（video1、0、0、videowidth、videoheight）;
ctxsource2.drawimage（video2、0、0、videowidth、videoheight）;
したがって、次のステップは、各ピクセルをチェックできるように、各描画画像のデータを取得することです。
currentFramesource1 = ctxsource1.getimagedata（0、0、videowidth、videoheight）;
currentFramesource2 = ctxsource2.getimagedata（0、0、videowidth、videoheight）;
取得した後、コードは緑色の画面のピクセル配列を閲覧し、緑色のピクセルを検索します。見つかった場合、コードはすべての緑色のピクセルをバックグラウンドシーンのピクセルに置き換えます。 ：
for（var i = 0; i <n; i ++）
{
//各ピクセルのRBGをつかむ：
r = currentFramesource1.data [i * 4 + 0];
g = currentFramesource1.data [i * 4 + 1];
b = currentFramesource1.data [i * 4 + 2];
//これが緑のピクセルのように見える場合は、それを置き換えます：
if（（r> = 0 && r <= 59）&&（g> = 74 && g <= 144）&&（b> = 0 && b <= 56））//ターゲットグリーンは（24、109、21）なので、それらの値を見てください。
{
pixelindex = i * 4;
currentFramesource1.data [pixelindex] = currentframesource2.data [pixelindex];
currentFramesource1.data [pixelindex + 1] = currentframesource2.data [pixelindex + 1];
currentFramesource1.data [pixelindex + 2] = currentframesource2.data [pixelindex + 2];
currentFramesource1.Data [pixelindex + 3] = currentframesource2.data [pixelindex + 3];
}
}
最後に、ピクセル配列はターゲットキャンバスに書き込まれます。
ctxdest.putimagedata（currentframesource1、0、0）;
SVGの典型的なアプリケーションは、ユーザーインターフェイスのようなものです。<！doctype html>
<html>
<head>
<script type = "text/javascript">
//この関数は、円がクリックされたときに呼び出されます。
関数clickme（）{
//アラートを表示します。
Alert（ "SVG UI要素をクリックしました。"）;
}
</script>
</head>
<body>
<h1>
SVGユーザーインターフェイス
</h1>
<！ - SVGペインを作成します。 - >
<svg>
<！ - 円を作成します。 - >
<circle cx = "100" cy = "100" r = "50" fill = "ゴールド" id = "uielement" onclick = "clickme（）;"
/>
</svg>
<p>
Gold Circularユーザーインターフェイス要素をクリックします。
</p>
</body>
</html>
この例は簡単ですが、ユーザーインターフェイスのすべての特性があります。この例から、SVGの便利なインタラクティブな性質に再び感謝しています。
最後に、画像を使用して、各アプリケーションに適したテクノロジーを要約します。図の各ブロックは、アプリケーションのタイプを表します。一定の目的に近いほど、このテクノロジーを使用することがより多くの利点があります。
実用的なリファレンス：スクリプトインデックス：http：//msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開発センター：https：//developer.mozilla.org/en/svg
人気リファレンス：http：//www.chinasvg.com/
公式文書：http：//www.w3.org/tr/svg11/