Heim >Web-Frontend >HTML-Tutorial >Was ist der Unterschied zwischen SVG und HTML5 Canvas?
Was ist der Unterschied zwischen SVG und HTML5 Canvas?
- PHPznach vorne
- 2023-09-18 22:49:021207Durchsuche
Das
HTML
HTML
| SVG | HTML Canvas |
|---|---|
| SVG hat eine bessere Skalierbarkeit. Drucken Sie also mit hoher Qualität bei jeder Auflösung. | Leinwand ist weniger skalierbar. Daher eignet es sich nicht zum Drucken mit höheren Auflösungen |
| SVG für eine geringere Anzahl von Objekten oder größere Flächen. | Canvas bietet eine bessere Leistung auf kleineren Flächen oder einer größeren Anzahl von Objekten. |
| SVG kann über Skripte und CSS geändert werden | Canvas kann nur über Skripte geändert werden |
| SVG ist vektorbasiert und besteht aus Formen. | Canvas basiert auf Raster und besteht aus Pixeln. |
Beispiel
Sie können versuchen, den folgenden Code auszuführen, um skalierbare Vektorgrafiken (SVG) zu einer Webseite hinzuzufügen -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG</title>
</head>
<body>
<h2 align = "center">HTML5 SVG Circle</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<circle id = "bluecircle" cx = "60" cy="60" r = "50" fill = "blue" />
</svg>
</body>
</html>Beispiel
Sie können versuchen, den folgenden Code auszuführen, um zu lernen, wie man ein Rechteck zeichnet mit HTML5 Canvas:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id = "newCanvas" width = "200" height = "100" style = "border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById('newCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#7cce2b';
ctx.fillRect(0,0,300,100);
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen SVG und HTML5 Canvas?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie definiere ich eine Definitionsliste in HTML?Nächster Artikel：Wie definiere ich eine Definitionsliste in HTML?