Maison  >  Article  >  interface Web  >  Quelle est la différence entre SVG et HTML5 Canvas ?

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

PHPz
PHPzavant
2023-09-18 22:49:021174parcourir

L'élément

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

HTML est un conteneur pour les graphiques SVG. SVG signifie Graphiques vectoriels évolutifs. SVG est utile pour définir des graphiques tels que des cases, des cercles, du texte, etc. SVG, qui signifie Scalable Vector Graphics, est un langage permettant de décrire des graphiques 2D et des applications graphiques en XML, qui sont ensuite restitués par un visualiseur SVG. La plupart des navigateurs Web peuvent afficher le format SVG, tout comme le format PNG, GIF et JPG. L'élément

HTML est utilisé pour dessiner des graphiques via JavaScript. L'élément est un conteneur graphique.

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>

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>

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer