ホームページ > 記事 > ウェブフロントエンド > html5のCanvasとSVGとは何ですか?それらの違いは何ですか? （例）
html5のCanvasとSVGとは何ですか?それらの違いは何ですか? （例）
- 青灯夜游オリジナル
- 2018-09-11 14:46:121805ブラウズ
この章では、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>レンダリング:
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 や
SVG は XML に基づいています。つまり、SVG DOM 内のすべての要素が利用可能です。 JavaScript イベント ハンドラーを要素にアタッチできます。 SVG では、描画されたすべての形状がオブジェクトとみなされます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。 特徴: 解像度に依存しない
イベントハンドラーをサポート大きなレンダリング領域を持つアプリケーション (Google マップなど) に最適です 複雑さが高いとレンダリングが遅くなります (DOM を過剰に使用するアプリケーションは高速ではありません) ゲームアプリケーションには適していません
Canvas
CanvasはJavaScriptを通じて2Dグラフィックを描画します。
キャンバスはピクセルごとにレンダリングされます。
キャンバスでは、グラフィックが描画されると、ブラウザーの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。
特徴:
解像度によって異なります
テキストレンダリング機能が弱い 結果画像を .png または .jpg 形式で保存する機能 多くのオブジェクトが頻繁に再描画されるグラフィックスを多用するゲームに最適です
以上がhtml5のCanvasとSVGとは何ですか?それらの違いは何ですか? （例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。