Canvasとsvgの違い

はじめに
面接を復習する過程で、偶然に一つの問題を見ました.canvasとsvgの違いを教えてください.長い間考えたが,知っていることはとても少ない.だから多くの文章を見て両者の違いを探しました.canvasとsvgの特徴はW 3 schoolのHTML 5 Canvas vs.SVGで詳しく紹介されています.ここで、インターネットで収集した資料をまとめます.
二、キャンバスの特徴:
1.cvasは、javascriptを通じて図形(2 D)を描画する.

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
script>

上記のコードからは、Canvasのもう一つの特徴が見られます.ピクセルごとにレンダリングされます.3.canvasは既に描画した画像を操作、修正することができません.つまり、canvasの中のいずれかの画像を取得できないということです.図が描画されると、ブラウザの注目を集め続けません.その位置が変化すると、図によって覆われているかもしれないオブジェクトを含むシーン全体も再描画する必要があります.
三、SVGの特徴:
1.SVGはXMLを使って2 D図形を記述する言語で、canvasはjsに描画する必要がありますが、SVGはhtmlの中でラベルだけで描画すればいいです.たとえば:

<svg width=“500px” height=“500px”>svg>
<line x1=”10″ y1=”10″ x2=”20″ y2=“20”>line>

2.SVGのフルネームはScaalable Vector Graphicsといい、スケーリング可能なベクトルパターン、すなわちSVGはベクトル図であり、canvasのビットマップとは違って、SVG画像は拡大またはサイズを変更する場合、そのグラフィック品質は損なわれない.3.SVGはXMLに基づいているので、それぞれの図形は個々の要素であり、DOMの一部である.したがって、SVG DOMの各要素は利用可能である.ある要素にJavaScriptイベントプロセッサを追加することができます.
四、キャンバスとSVGの比較
キャンバス
SVG
機能
簡単、2 D図面API
機能が豊富で、各種の図形、アニメーション
特徴
ピクセル、スクリプトドライバ、操作不可
ベクトル、XML、操作可能
パフォーマンス
小面積、大数量応用シーン(>10k)に適しています.
大面積、小数応用シーン(<10 k)
サポート
メインブラウザ、ie 9+.
メインブラウザ、ie 9+、その他のsvgビューワー
イベントインタラクション
ユーザがピクセルポイント(x,y)にインタラクションする
ユーザがグラフィカル要素(path,rect)にインタラクションする
ファイル形式
.png.jpg
.svg
解像度
依存解像度
解像度に依存しない
イベントハンドリング
サポートしない
サポート
ゲームの適用
画像密集型のゲームに最適で、多くのオブジェクトが頻繁に塗り替えられます.
ゲームの適用には適していません.
感謝します
特にSVGとHTML 5のcanvasにはそれぞれどんなメリットがありますか?文章の助け.文章表のアイデアは知乎ユーザーさんの教えに由来しています.特にご提供いただきました知識に感謝します.
転載先:https://www.cnblogs.com/hzgweb/p/7911303.html