HTML5 13 での SVG 2D の概要 — SVG と Canvas、長所と適用可能なシナリオの分析_html5 チュートリアル スキル

ここまで、SVG と Canvas の主な機能をまとめました。これらはすべて HTML5 でサポートされている 2D グラフィックス表示テクノロジであり、すべてベクター グラフィックスをサポートしています。次に、これら 2 つのテクノロジーを比較し、それぞれの強みと適用可能なシナリオを分析してみましょう。
まず、2 つのテクノロジーの顕著な特徴を分析しましょう。以下の表を参照してください。

Canvas	SVG
基于像素（动态 .png）	基于形状
单个 HTML 元素	多个图形元素，这些元素成为 DOM 的一部分
仅通过脚本修改	通过脚本和 CSS 修改
事件模型/用户交互颗粒化 (x,y)	事件模型/用户交互抽象化 (rect, path)
图面较小时、对象数量较大 (>10k)（或同时满足这二者）时性能更佳	对象数量较小 (

上記の比較からわかるように、Canvas はピクセル操作において大きな利点を持っており、SVG の最大の利点はその便利な対話性と操作性です。 Canvas の使用はキャンバスのサイズ (実際にはピクセル数) に大きく影響されますが、SVG の使用はオブジェクトの数 (要素の数) に大きく影響されます。 Canvas と SVG では、変更方法も異なります。 Canvas オブジェクトが描画されると、スクリプトや CSS を使用して変更することはできません。 SVG オブジェクトはドキュメント オブジェクト モデルの一部であるため、スクリプトと CSS を使用していつでも変更できます。
実際、Canvas はピクセルベースのリアルタイム モードのグラフィック システムです。オブジェクトを描画した後、オブジェクトが再度必要になった場合は、SVG を再描画する必要があります。描画後にオブジェクトを再描画する必要がある場合、オブジェクト情報を変更する必要があります。この根本的な違いにより、さまざまなアプリケーション シナリオが生まれます。

これは、次の一般的なアプリケーションでも経験できます。
忠実度の高いドキュメント
この点は、拡大縮小時に歪みなくドキュメントを閲覧したり、高品質のドキュメントを印刷したりするには、通常、マップ サービスなどの SVG が好まれます。 。
静的画像リソース
SVG は、アプリケーションや Web ページの画像、大きな画像や小さな画像など、単純な画像によく使用されます。 SVG は DOM にロードするか、画像を作成する前に少なくとも解析する必要があるため、パフォーマンスは若干低下しますが、Web ページのレンダリングのコスト (数ミリ秒程度) と比較すると、この効率は大幅に向上します。損失は​​極めて小さいです。
ファイル サイズの点では (ネットワーク トラフィックを評価する目的で)、SVG 画像のサイズは PNG 画像のサイズとあまり変わりません。ただし、画像形式としての SVG はスケーラブルであるため、開発者が画像をより大きなスケールで使用したい場合、またはユーザーが高 DPI 画面を使用している場合、SVG を使用することは非常に良い選択です。

ピクセル操作
Canvas を使用すると、要素の対応する情報を保持せずに高速な描画速度を得ることができます。特にピクセル操作を処理する必要がある場合、パフォーマンスが向上します。このタイプのアプリケーションは基本的に Canvas テクノロジーを選択します。
ライブ データ
キャンバスは、非対話型のリアルタイム データ視覚化に最適です。リアルタイムの気象データなど。
チャートとグラフ
関連するグラフやチャートを描画するには SVG または Canvas を使用できますが、操作性を重視したい場合は間違いなく SVG が最適な選択です。インタラクティブ性が必要ない場合は、SVG が最適です。パフォーマンスを考慮すると、Canvas の方が適しています。
2 次元ゲーム
ほとんどのゲームは低レベル API を使用して開発されるため、Canvas は受け入れられやすいです。しかし実際には、ゲーム シーンを描画する場合、Canvas は図形の描画と配置を繰り返し行う必要がありますが、SVG はメモリに保持され、関連する属性の変更が非常に簡単であるため、SVG も良い選択です。
小さなゲームボード上にいくつかのオブジェクトを含むゲームを作成する場合、Canvas と SVG の間にパフォーマンスの違いはほとんどありません。ただし、より多くのオブジェクトが作成されると、Canvas コードは大幅に大きくなります。 Canvas ゲームは、ゲームがループするたびに Canvas オブジェクトを再描画する必要があるため、速度が低下します。
ユーザー インターフェイスのデザイン
インタラクティブ性が優れているため、SVG は間違いなく優れています。 SVG の保存モードのグラフィック表示を利用して、本文内の HTML のようなマークアップですべてのユーザー インターフェイスの詳細を作成できます。各 SVG 要素とサブ要素は個別のイベントに応答できるため、複雑なユーザー インターフェイスを非常に簡単に作成できます。一方、Canvas では、より複雑なコード シーケンスに従って、ユーザー インターフェイスの各部分の作成方法を指定する必要があります。従う必要がある順序は次のとおりです:
• コンテキストを取得します。
•絵を描き始めます。
•各線と各塗りの色を指定します。
• 形状を定義します。
•描画を終了します。
さらに、Canvas はキャンバス全体のイベントのみを処理できます。より複雑なユーザー インターフェイスの場合は、キャンバス上でクリックした位置の座標を決定する必要があります。 SVG は、各子要素のイベントを個別に処理できます。

次の 2 つの例は、canvas と svg の技術的な利点をそれぞれ示しています。

グリーン スクリーンなどのキャンバスの一般的なアプリケーション: http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasgreenscreen.htm

レンダリングは次のとおりです:

ページを開くと、ページのソースコードが表示されます。

このアプリケーションは、2 つのビデオから別のビデオにピクセルを読み書きします。コードでは、2 つのビデオ、2 つのキャンバス、および最終キャンバスを使用します。ビデオを一度に 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 {

// 各ピクセルの RBG を取得します:
r = currentFrameSource1.data[i * 4 0];
g = currentFrameSource1.data[i * 4 1 ];
b = currentFrameSource1.data[i * 4 2];

// これが緑色のピクセルのように見える場合は、それを置き換えます:
if ( (r >= 0 && r = 74 && g = 0 && b {
xelIndex = 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 の典型的なアプリケーション

:

コードをコピー

コードは次のとおりです:

gt ;

> ;

< ;h1>
SVG ユーザー インターフェイス


< ;svg height="200" width="200" >

/>

金色の円形ユーザー インターフェイスをクリックします

この例は単純ですが、ユーザー インターフェイスのすべての機能が含まれていますこの例から、 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/