Maison > Article > interface Web > Quelle est la différence entre SVG et HTML5 Canvas ?
L'élément
HTML
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. |
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>
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('newCanvas'); var ctx = c.getContext('2d'); ctx.fillStyle = '#7cce2b'; 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!