Mit Canvas und SVG können Sie beide Grafiken im Browser erstellen, sie unterscheiden sich jedoch grundlegend.
SVG
SVG ist eine Sprache, die XML zur Beschreibung von 2D-Grafiken verwendet.
SVG basiert auf XML, was bedeutet, dass jedes Element im SVG-DOM verfügbar ist. Sie können einem Element einen JavaScript-Ereignishandler hinzufügen.
In SVG wird jede gezeichnete Form als Objekt betrachtet. Ändern sich die Eigenschaften eines SVG-Objekts, kann der Browser die Grafik automatisch reproduzieren.
Canvas
Canvas zeichnet 2D-Grafiken über JavaScript.
Leinwand wird Pixel für Pixel gerendert.
Sobald eine Grafik im Canvas gezeichnet ist, erhält sie nicht mehr die Aufmerksamkeit des Browsers. Wenn sich die Position ändert, muss die gesamte Szene neu gezeichnet werden, einschließlich aller Objekte, die möglicherweise von Grafiken verdeckt wurden.
Vergleich von Canvas und SVG
Die folgende Tabelle listet einige Unterschiede zwischen Canvas und SVG auf.
Canvas
Auflösungsabhängig
Unterstützt keine Event-Handler
Schwache Textwiedergabefunktionen
Kann in .png oder gerendert werden. Das Speichern des resultierenden Bildes im JPG-Format
eignet sich am besten für grafikintensive Spiele, bei denen viele Objekte häufig neu gezeichnet werden
SVG
hängt nicht von der Auflösung ab
Unterstützt Ereignishandler
Am besten für Anwendungen mit großen Renderingbereichen (wie Google Maps)
Hohe Komplexität verlangsamt das Rendering (jede Anwendung, die das DOM übermäßig nutzt, ist nicht schnell)
Nicht für Spieleanwendungen geeignet
Das Obige ist der Inhalt von HTML 5 Canvas vs. SVG. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!
