HTML5のキャンバスとSVGの違いは何ですか

今日私が皆さんと共有する内容は、JavaScript における Canvas と SVG の違いについてであり、一定の参考効果があるため、皆様のお役に立てれば幸いです

##[推奨コース: HTML5Tutorial]

SVG

SVG は、XML を使用して 2D グラフィックスを記述する言語です。つまり、SVG オブジェクトのプロパティが変更された場合、ブラウザーはグラフィックスを自動的に再現できます。

Canvas

Canvas は JavaScript を使用して 2D グラフィックを描画します。グラフィックはピクセルごとにレンダリングされます。グラフィックの位置が変更されると、上書きされたオブジェクトも含めてシーン全体を再描画する必要があります。

SVG とキャンバスの違い

(1) SVG は XML で 2D グラフィックスを記述するために使用される言語です。canvas は JavaScript を使用して 2D グラフィックスを動的に描画します

(2) SVG はイベント ハンドラーとキャンバスをサポートできます

はサポートされていません (3) SVG の属性が変更されると、ブラウザーは再レンダリングできるため、ベクター グラフィックスに適していますが、キャンバスは再レンダリングできません。これは、ビデオ ゲームなどに適しています。

(4) Canvas はピクセルを非常にうまく描画でき、結果を png または gif として保存したり、API コンテナとして使用したりできます。

(5) キャンバスは解像度に依存します。 SVG は解像度に依存しません。

(6) SVG はテキストのレンダリングに優れていますが、特に大量の DOM が適用される場合、Canvas のレンダリングは Canvas よりも遅くなる可能性があります。

(7) Canvas は、小さな領域のレンダリングに適しています。 SVG は、より広い領域でより適切にレンダリングされます。

#SVG と Canvas の比較

##SVGcanvas#拡張可能# 拡張不可##DOM とイベントをサポート 解像度に依存します より大きな領域または複雑な領域には適していません 領域 より小さな領域のレンダリング アニメーションにより適した(ビデオ) と画像 # API には適していません # API に適しています テキストを適切に表示 テキストをうまく表現できません キャンバス描画円

<canvas id="circle"></canvas>

<script type="text/javascript">
	
	var circle=document.getElementById("circle");
	var yuan=circle.getContext("2d");
	yuan.beginPath();
	yuan.strokeStyle="pink";
	yuan.arc(50,50,50,0,Math.PI*2,true);
	 yuan.stroke();
</script>

画像を拡大すると、境界線の周囲にギザギザがあることがわかります。

## イベントはサポートなし	#解像度には依存しません
	複雑な領域をレンダリングすると遅くなる可能性があります
	より良いレンダリング より大きな領域 (DOM を除く)
	より優れたベクター グラフィックス
	##事例分析

SVG で円を描く

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1">
<circle cx="100" cy="50" r="40" stroke="pink"
stroke-width="2" fill="#fff"/>
</svg>

それは可能ですSVG で描画されたグラフィックスは、拡大しても歪まないことがわかります。

要約: 以上がこの記事の全内容です。この記事を通じて、皆さんが Canvas と SVG の違いをある程度理解していただければ幸いです。

以上がHTML5のキャンバスとSVGの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。