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

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

PHPzavant: 2023-09-18 22:49:021210parcourir

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>

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!

JavaScript html5 css html xml 对象 canvas

Déclaration：

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

Article précédent：Comment définir une liste de définitions en HTML ?Article suivant：Comment définir une liste de définitions en HTML ?

Articles Liés

Voir plus