Vergleich der Zeichenprinzipien zwischen Canvas und SVG in HTML5_html5-Tutorial-Fähigkeiten

Sowohl Canvas als auch SVG ermöglichen das Zeichnen von Bildern im Browser, ihre Grundprinzipien sind jedoch unterschiedlich.
SVG
SVG ist eine Sprache zur Beschreibung zweidimensionaler Grafiken in XML.
SVG basiert auf XML, was bedeutet, dass jedes Element im SVG-DOM verfügbar ist. Sie können für jedes Element JS-Ereignishandler hinzufügen.
In SVG wird jede Grafik als Objekt aufgezeichnet. Wenn sich die Eigenschaften eines SVG-Objekts ändern, kann der Browser die Grafik automatisch neu generieren.

Canvas
Canvas kann 2D-Grafiken im Handumdrehen zeichnen (mit JS)
Canvas kann entsprechend der Pixel neu generiert werden.

Sobald die Grafik in Canvas fertig ist, wird sie vom Browser vergessen. Soll die Position der Grafik geändert werden, muss der gesamte Bildschirm neu gezeichnet werden, einschließlich der von der Grafik abgedeckten Objekte.

Vergleich zwischen Canvas und SVG
Die folgende Tabelle zeigt die Hauptunterschiede zwischen Canvas und SVG:

Canvas	SVG
依赖分辨率	独立于分辨率
不支持事件处理器	支持事件处理器
弱文本渲染能力	最适合具有大渲染面积的应用（谷歌地图）
可以保存最终图片为PNG或者JPG	复杂图像，重画变慢（任何使用DOM很多的情况都会变慢）
最适合许多 对象频繁重画的图形游戏	不适合游戏应用