SVG 与 Canvas 的五大区别

技术频道 - html技术

作者:admin 时间:2022-8-10 16:53:29 浏览:

HTML <svg> 元素是 SVG 图形的容器。SVG 代表可缩放矢量图形。SVG 可用于定义图形，如框、圆、文本等。SVG 代表可缩放矢量图形，是一种用于在 XML 中描述 2D 图形和图形应用程序的语言，然后 XML 由 SVG 查看器呈现。大多数网络浏览器都可以显示 SVG，就像它们可以显示 PNG、GIF 和 JPG 一样。

HTML <canvas> 元素用于通过 JavaScript 绘制图形。<canvas> 元素是图形的容器。

SVG 和 Canvas 的五大区别

下表显示了 SVG 和 Canvas 的五大区别。

SVG	Canvas
SVG 更具可扩展性。因此，它能够以任何尺寸以高分辨率打印。	画布不可扩展。因此，它不能以更高的分辨率打印。
使用更少的对象、更大的表面或两者兼而有之，可以提高性能。	对象越多、表面越小或两者兼而有之，性能会更好。
可以使用脚本和 CSS 修改 SVG 文件。	Canvas 文件的更改只能通过脚本进行。
出色的文本渲染能力。	文本渲染不理想。
SVG 格式是基于矢量和基于形状的。	画布由像素组成并且是基于光栅的。

例子

SVG

你可以尝试运行以下代码将可缩放矢量图形 (SVG) 添加到网页。

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

demo download

输出

Canvas

你可以尝试运行以下代码来学习如何使用 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>

demo download

输出