html5のCanvasとSVGとは何ですか?それらの違いは何ですか? （例）-H5 チュートリアル-php.cn

html5のCanvasとSVGとは何ですか?それらの違いは何ですか? （例）

青灯夜游

リリース： 2018-09-11 14:46:12

オリジナル

1829 人が閲覧しました

この章では、html5 の Canvas と SVG とは何なのかを紹介します。それらの違いは何ですか?困っている友人は参考にしていただければ幸いです。

1. キャンバスとは何ですか?

Canvas は、長さと幅が指定された長方形のキャンバスです。HTML5 JS API を使用してさまざまなグラフィックを描画するために、新しい HTML5 JavaScript を使用します。ただし、キャンバス自体には描画機能はありません (単なるグラフィックスのコンテナです)。実際の描画を行うにはスクリプトを使用する必要があります。

キャンバスサンプルコード: キャンバスを作成し、キャンバス上に円を描きます

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas画布</title>
		<style type="text/css">
			.demo{
				width: 500px;
				height: 150px;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<!--添加canvas便签，创建画布-->
			<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
			    您的浏览器不支持 HTML5 canvas 标签。
			</canvas>
		</div>
	</body>
	<script type="text/javascript"> 
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		ctx.beginPath();
		ctx.arc(95,50,40,0,2*Math.PI);
		ctx.stroke();
	</script>
</html>

ログイン後にコピー

レンダリング:

html5のCanvasとSVGとは何ですか?それらの違いは何ですか? （例）

2. SVGとは何ですか?

SVG Scalable Vector Graphics (スケーラブルベクターグラフィックス) は、2 次元のベクターグラフィックスを記述するための Extensible Markup Language (XML) に基づくグラフィックス形式です。 SVG は、W3C によって開発された新しい 2 次元ベクターグラフィックス形式であり、仕様のネットワークベクターグラフィックス標準でもあります。 SVG は XML 構文に厳密に従い、テキスト形式の記述言語を使用して画像コンテンツを記述します。したがって、SVG は画像解像度に依存しないベクトルグラフィック形式です。

SVG を簡単に要約します:
SVG はスケーラブルベクターグラフィックスを指します
SVG は Web 用のベクターベースのグラフィックスを定義するために使用されます
SVG は XML 形式を使用してグラフィックスを定義します
SVG 画像は拡大またはサイズ変更されます SVG は世界の標準ですWide Web Consortium
SVG は、DOM や

3 などの W3C 標準と統合されています。 Canvas と SVG の違い

SVG

html5のCanvasとSVGとは何ですか?それらの違いは何ですか? （例）

SVG は、XML を使用して 2D グラフィックスを記述する言語です。

SVG は XML に基づいています。つまり、SVG DOM 内のすべての要素が利用可能です。 JavaScript イベントハンドラーを要素にアタッチできます。 SVG では、描画されたすべての形状がオブジェクトとみなされます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。特徴: 解像度に依存しない

イベントハンドラーをサポート

大きなレンダリング領域を持つアプリケーション (Google マップなど) に最適です 複雑さが高いとレンダリングが遅くなります (DOM を過剰に使用するアプリケーションは高速ではありません) ゲームアプリケーションには適していません

Canvas

CanvasはJavaScriptを通じて2Dグラフィックを描画します。
キャンバスはピクセルごとにレンダリングされます。
キャンバスでは、グラフィックが描画されると、ブラウザーの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。

特徴:
解像度によって異なります

イベントハンドラーはサポートされていません

テキストレンダリング機能が弱い 結果画像を .png または .jpg 形式で保存する機能 多くのオブジェクトが頻繁に再描画されるグラフィックスを多用するゲームに最適です

以上がhtml5のCanvasとSVGとは何ですか?それらの違いは何ですか? （例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。