首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >SVG和HTML5画布有什么区别?

SVG和HTML5画布有什么区别?
EN

Stack Overflow用户
提问于 2011-02-15 03:27:36
回答 4查看 71.1K关注 0票数 95

SVG和HTML5画布有什么区别?他们似乎都对我做了同样的事情。基本上,它们都是使用坐标点绘制矢量图片。

我遗漏了什么?SVG和HTML5画布的主要区别是什么?为什么我应该选择一个而不是另一个?

EN

回答 4

Stack Overflow用户

发布于 2011-02-19 11:15:35

SVG就像一个“绘图”程序。绘图被指定为每个形状的绘图说明,并且任何形状的任何部分都可以更改。绘图是以形状为导向的。

Canvas就像一个“画图”程序。一旦像素出现在屏幕上,这就是你的图画。您不能更改形状,除非使用其他像素覆盖它们。绘画是面向像素的。

能够改变绘图对于一些程序来说是非常重要的;例如绘图应用程序,绘图工具等。所以SVG在这方面有优势。

对于一些艺术节目来说,能够控制单个像素非常重要。

使用Canvas比使用SVG更容易获得通过鼠标拖动进行用户操作的出色动画性能。

计算机屏幕上的一个像素通常会消耗4个字节的信息,而现在一个计算机屏幕需要几兆字节。因此,如果您想让用户编辑图像,然后再次上传它,Canvas可能会很不方便。

相比之下,使用SVG绘制覆盖整个屏幕的几个形状只占用几个字节,下载速度很快,并且可以很容易地再次上传,并且在该方向上的优势与在另一个方向上的优势相同。所以SVG可以比Canvas更快。

Google使用SVG实现了Google Maps。这使得这款web应用程序的性能更快,滚动也更流畅。

票数 53
EN

Stack Overflow用户

发布于 2012-10-13 03:00:18

SVG和Canvas给我的印象最深的两件事是,

能够在没有DOM的情况下使用Canvas,因为SVG在很大程度上依赖于DOM,并且随着复杂性的增加,性能会降低。就像游戏设计一样。

使用SVG的好处是分辨率在不同平台上保持相同,这在Canvas中是不存在的。

这个网站提供了更多的详细信息。http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

票数 11
EN

Stack Overflow用户

发布于 2017-12-13 01:23:56

SVG是图形的规范,类似于文件格式。SVG是一种文档。您可以像交换HTML文件一样交换SVG文件。此外,因为SVG元素和HTML元素共享相同的DOM,所以可以使用JavaScript以与创建HTML DOM相同的方式生成SVG DOM。但是你不需要JavaScript来生成SVG文件。一个简单的文本编辑器就足以编写SVG。但您至少需要一个计算器来计算绘图中形状的坐标。

CANVAS只是一个绘图区域。有必要使用JavaScript来生成画布的内容。您不能交换画布。它不是文档。并且画布的元素不是DOM树的一部分。不能使用DOM来操作画布的内容。相反,您必须使用专用的canvas API将形状绘制到画布中。

SVG的优点是,您可以将图形作为文档进行交换。CANVAS的优点是,生成内容的JavaScript应用编程接口不太冗长。

下面是一个示例,它表明您可以实现类似的结果,但在JavaScript中如何实现这一点却非常不同。

代码语言:javascript
复制
// Italic S in SVG

(function () {

  const ns='http://www.w3.org/2000/svg';
  let s = document.querySelector('svg');
  let p = document.createElementNS (ns, 'path');
  p.setAttribute ('id', 'arc');
  p.setAttribute ('d', 'M 0.9 -0.9 a 0.8,0.4 -10 0,0 -0.9,0.9');
  s.appendChild (p);
  let u = document.createElementNS (ns, 'use');
  u.setAttribute ('href', '#arc');
  u.setAttribute ('transform', 'rotate(180)');
  s.appendChild (u);

})();

// Italic S in CANVAS

(function () {

  let c = document.querySelector('canvas');
  let w = c.width = c.clientWidth;
  let h = c.height = c.clientHeight;
  let x = c.getContext('2d');
  x.lineWidth = 0.05 * w;
  x.moveTo (w/2, h/2);
  x.bezierCurveTo (w*0.02, h*0.4,
                   w*0.4, -h*0.02,
                   w*0.95, h*0.05);
  x.moveTo (w/2, h/2);
  x.bezierCurveTo (w*(1-0.02), h*(1-0.4),
                   w*(1-0.4), h*(1+0.02),
                   w*(1-0.95), h*(1-0.05));
  x.stroke();

})();
代码语言:javascript
复制
svg, canvas {
  width: 3em;
  height: 3em;
}

svg {
  vertical-align: text-top;
  stroke: black;
  stroke-width: 0.1;
  fill: none;
}

canvas {
  vertical-align: text-bottom;
}

div {
  float: left;
}
代码语言:javascript
复制
<div><svg viewBox="-1 -1 2 2"></svg>VG</div>
<div>CANVA<canvas></canvas></div>

如您所见,结果几乎相同,但JavaScript代码完全不同。

SVG是通过DOM使用createElementsetAttributeappendChild创建的。所有图形都在属性字符串中。SVG有更强大的原语。例如,画布没有任何等同于SVG圆弧路径的东西。画布示例尝试使用Bezier曲线模拟SVG圆弧。在SVG中,您可以重用元素以对其进行转换。在画布中,您不能重用元素。相反,您必须编写一个JavaScript函数才能调用它两次。SVG有一个viewBox,它允许使用标准化的坐标,这简化了旋转。在画布中,您必须根据clientWidthclientHeight自己计算坐标。您可以使用CSS设置所有SVG元素的样式。在画布中,您不能使用CSS设置任何样式。因为SVG是一个DOM,所以您可以将事件处理程序分配给所有SVG元素。画布中的元素没有DOM和DOM事件处理程序。

但另一方面,画布代码更容易阅读。您不需要关心XML名称空间。而且您可以直接调用图形函数,因为您不需要构建DOM。

教训很清楚:如果您想快速绘制一些图形,请使用画布。如果需要共享图形,比如使用CSS设置样式,或者希望在图形中使用DOM事件处理程序,则构建一个SVG。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4996374

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档