Quelle est la différence entre SVG et HTML5 Canvas ?-tutoriel HTML-php.cn

Quelle est la différence entre SVG et HTML5 Canvas ?

PHPz

Libérer： 2023-09-18 22:49:02

avant

1180 Les gens l'ont consulté

L'élément

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

HTML

SVG	HTML Canvas
SVG a une meilleure évolutivité. Imprimez donc en haute qualité quelle que soit la résolution	Canvas est moins évolutif. Par conséquent, il ne convient pas à l’impression à des résolutions plus élevées
SVG pour un plus petit nombre d’objets ou des surfaces plus grandes.	Canvas offre de meilleures performances sur des surfaces plus petites ou un plus grand nombre d'objets.
SVG peut être modifié via des scripts et CSS	Le canevas ne peut être modifié que via des scripts
SVG est basé sur des vecteurs et se compose de formes.	Canvas est basé sur un raster et se compose de pixels.

Exemple

Vous pouvez essayer d'exécuter le code suivant pour ajouter des graphiques vectoriels évolutifs (SVG) à une page Web -

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

Copier après la connexion

Exemple

Vous pouvez essayer d'exécuter le code suivant pour apprendre à dessiner un rectangle en utilisant 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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!