Was sind Canvas und SVG in HTML5? Was ist der Unterschied zwischen ihnen? (Beispiel)-H5-Tutorial-php.cn

Was sind Canvas und SVG in HTML5? Was ist der Unterschied zwischen ihnen? (Beispiel)

青灯夜游

Freigeben： 2018-09-11 14:46:12

Original

1780 Leute haben es durchsucht

In diesem Kapitel erfahren Sie, was Canvas und SVG in HTML5 sind. Was ist der Unterschied zwischen ihnen? Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Was ist Canvas?

Canvas ist eine rechteckige Leinwand mit einer bestimmten Länge und Breite. Wir verwenden das neue HTML5-JavaScript und können die HTML5 JS-API zum Zeichnen verschiedener Grafiken verwenden. Allerdings verfügt Canvas selbst über keine Zeichenfunktionen (es ist nur ein Container für Grafiken) – Sie müssen ein Skript verwenden, um das eigentliche Zeichnen durchzuführen.

Canvas-Beispielcode: Erstellen Sie eine Leinwand und zeichnen Sie dann einen Kreis auf der Leinwand

<!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>

Nach dem Login kopieren

Rendering:

Was sind Canvas und SVG in HTML5? Was ist der Unterschied zwischen ihnen? (Beispiel)

2. Was ist SVG?

SVG Scalable Vector Graphics ist ein auf Extensible Markup Language (XML) basierendes Grafikformat zur Beschreibung zweidimensionaler Vektorgrafiken. SVG ist ein neues zweidimensionales Vektorgrafikformat, das vom W3C entwickelt wurde und auch der Netzwerk-Vektorgrafikstandard in der Spezifikation ist. SVG folgt strikt der XML-Syntax und verwendet eine Beschreibungssprache im Textformat zur Beschreibung von Bildinhalten. Daher handelt es sich um ein Vektorgrafikformat, das unabhängig von der Bildauflösung ist.

Wir können SVG kurz zusammenfassen:
SVG steht für Scalable Vector Graphics
SVG wird verwendet, um vektorbasierte Grafiken für das Web zu definieren
SVG wird mit XML-Formatgrafiken definiert
SVG Bilder können vergrößert oder in der Größe geändert werden, ohne dass die Grafikqualität verloren geht
SVG ist ein Standard des World Wide Web Consortium
SVG ist in W3C-Standards wie DOM und XSL integriert

SVG-Beispielcode:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>SVG</title>
		<style type="text/css">
			.demo{
				width: 500px;
				height: 150px;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<svg width="100%" height="100%"  >
		        <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />
		    </svg>
		</div>
	</body>
</html>

Nach dem Login kopieren

Rendering:

Was sind Canvas und SVG in HTML5? Was ist der Unterschied zwischen ihnen? (Beispiel)

3. Der Unterschied zwischen Canvas und SVG

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.

Eigenschaften:
Hängt nicht von der Auflösung ab
Ereignishandler unterstützen
Am besten geeignet für Anwendungen mit großen Rendering-Bereichen (wie Google Maps)
Hohe Komplexität verlangsamt das Rendern (jede Anwendung, die das DOM übermäßig nutzt, ist nicht schnell)
Nicht für Spieleanwendungen geeignet

Canvas

Canvas zeichnet 2D-Grafiken über JavaScript.
Canvas wird Pixel für Pixel gerendert.
Sobald die 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.

Eigenschaften:
Hängt von der Auflösung ab
Ereignishandler werden nicht unterstützt
Schwache Textwiedergabefunktionen
Möglichkeit, Ergebnisbilder im .png- oder .jpg-Format zu speichern
Am besten geeignet für grafikintensive Spiele, bei denen viele Objekte häufig neu gezeichnet werden

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