Was ist der Unterschied zwischen SVG und HTML5 Canvas?-HTML-Tutorial-php.cn

Was ist der Unterschied zwischen SVG und HTML5 Canvas?

PHPz

Freigeben： 2023-09-18 22:49:02

nach vorne

1204 Leute haben es durchsucht

Das

SVG和HTML5 Canvas之间有什么区别？

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>

Nach dem Login kopieren

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(&#39;newCanvas&#39;);
         var ctx = c.getContext(&#39;2d&#39;);
         ctx.fillStyle = &#39;#7cce2b&#39;;
         ctx.fillRect(0,0,300,100);
      </script>
   </body>
</html>

Nach dem Login kopieren

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!