Heim > Web-Frontend > HTML-Tutorial > Was ist der Unterschied zwischen Canvas und SVG in HTML5?

Was ist der Unterschied zwischen Canvas und SVG in HTML5?

清浅
Freigeben: 2018-11-28 09:35:30
Original
4739 Leute haben es durchsucht

Was ich heute mit Ihnen teilen werde, ist der Unterschied zwischen Canvas und SVG in JavaScript. Es hat einen gewissen Referenzeffekt und ich hoffe, dass es für alle hilfreich sein wird

【 Empfohlene Kurse: HTML5-Tutorial]

SVG

SVG ist eine Sprache, die XML zur Beschreibung von 2D-Grafiken verwendet . Es basiert auf XML. Das heißt, wir können einem Element einen JavaScript-Ereignishandler hinzufügen. Wenn sich die Eigenschaften des SVG-Objekts ändern, kann der Browser die Grafiken automatisch reproduzieren.

Canvas

Canvas zeichnet 2D-Grafiken über JavaScript. Sobald die Grafik gezeichnet ist und sich ihre Position ändert, muss die gesamte Szene neu gezeichnet werden, einschließlich aller abgedeckten Objekte

SVG und Leinwand. Der Unterschied

(1) SVG ist eine Sprache zur Beschreibung von 2D-Grafiken in XML, Canvas verwendet JavaScript zur dynamischen Darstellung von 2D-Grafiken

(2) SVG kann Event-Handler und Canvas unterstützen

wird nicht unterstützt (3) Wenn sich die Attribute in SVG ändern, kann der Browser es neu rendern, was für Vektorgrafiken geeignet ist, Canvas jedoch nicht, was eher für Videospiele usw. geeignet ist.

(4) Canvas kann Pixel sehr gut zeichnen und kann zum Speichern der Ergebnisse als PNG oder GIF verwendet werden und kann als API-Container verwendet werden.

(5) Leinwand hängt von der Auflösung ab. SVG ist auflösungsunabhängig.

(6) SVG bietet eine bessere Textwiedergabe, aber Canvas kann beim Rendern möglicherweise langsamer sein als Canvas, insbesondere wenn eine große Menge DOM angewendet wird.

(7) Canvas eignet sich besser zum Rendern kleinerer Bereiche. SVG wird auf größeren Flächen besser gerendert.

Vergleich zwischen SVG und Canvas

SVG canvas
Erweiterbar
SVG canvas
可扩展
 不可扩展
支持DOM和事件    没有事件支持
不依赖分辨率    分辨率依赖 
在渲染复杂区域时可能会更慢   不适合较大或复杂的区域    
呈现更好更大的区域(DOM除外)     渲染更小的区域
更好的矢量图形     更适合动画(视频)和图像   
不适合API     适合API    
很好地呈现文本  不能很好地呈现文本    
Nicht skalierbar
Unterstützt DOM und Ereignisse Keine Ereignisunterstützung
Hängt nicht von der Auflösung ab Auflösungsabhängig
Kann beim Rendern komplexer Bereiche langsamer sein Nicht geeignet für größere oder komplexe Bereiche
Stellt einen besseren und größeren Bereich dar (außer DOM) Einen kleineren Bereich rendern
Bessere Vektorgrafiken Besser geeignet für Animationen (Video) und Bilder
Nicht für API geeignet Geeignet für API
Text gut darstellen Text wird nicht gut wiedergegeben

Fallanalyse

Leinwand zeichnet einen Kreis

<canvas id="circle"></canvas>

<script type="text/javascript">
	
	var circle=document.getElementById("circle");
	var yuan=circle.getContext("2d");
	yuan.beginPath();
	yuan.strokeStyle="pink";
	yuan.arc(50,50,50,0,Math.PI*2,true);
	 yuan.stroke();
</script>
Nach dem Login kopieren

Image 19.jpg

Sie können sehen, dass das Bild vergrößert ist. Es gibt gezackte Kanten am Rand

SVG zeichnet einen Kreis

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1">
<circle cx="100" cy="50" r="40" stroke="pink"
stroke-width="2" fill="#fff"/>
</svg>
Nach dem Login kopieren

Image 20.jpg

Es ist ersichtlich, dass die von SVG gezeichneten Grafiken beim Vergrößern nicht verzerrt werden.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass jeder durch diesen Artikel ein gewisses Verständnis für den Unterschied zwischen Canvas und SVG bekommt.

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Canvas und SVG in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage