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

百变鹏仔 3个月前 (09-21) #HTML

文章标签有什么区别

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

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

SVG	HTML 画布
SVG 具有更好的可扩展性。因此可以在任何分辨率下高质量打印立即学习“前端免费学习笔记（深入）”；	Canvas的扩展性较差。因此，它不适合以较高分辨率进行打印
SVG 对于较少数量的对象或较大的表面。	Canvas 在较小的表面或较大数量的对象上提供更好的性能。
SVG可以通过脚本和CSS修改	画布只能通过脚本修改
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>

示例

您可以尝试运行以下代码，了解如何使用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>

文章推荐

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

示例

示例

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8