HTML5画布与SVG与div

JavaScript

Tom凯

2020-03-13

即时创建元素并能够移动元素的最佳方法是什么？例如，假设我要创建一个矩形，圆形和多边形，然后选择这些对象并四处移动。

我了解HTML5提供了三个使之成为可能的元素：svg，canvas和div。对于我想做什么，这些元素中的哪一个将提供最佳性能？

为了比较这些方法，我正在考虑创建三个视觉上相同的网页，每个网页中都有页眉，页脚，小部件和文本内容。第一页中的小部件将完全使用canvas元素创建，第二页中的完全使用svg元素创建，而第三页中的使用简单div元素HTML和CSS创建。

第1377篇《HTML5画布与SVG与div》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答

飞云斯丁GO 2020.03.13

在谷歌搜索时，我在http://teropa.info/blog/2016/12/12/graphics-in-angular-2.html中找到了有关SVG和Canvas的使用和压缩的很好的解释。

希望能帮助到你：

SVG与HTML一样，使用保留的呈现方式：当我们想在屏幕上绘制矩形时，我们在DOM中声明性地使用一个元素。然后，浏览器将绘制一个矩形，但它还将创建一个表示该矩形的内存中SVGRectElement对象。这个对象是我们需要操纵的东西–它被保留了。我们可以随时间分配不同的位置和大小。我们还可以附加事件侦听器以使其具有交互性。

Canvas使用立即渲染：当我们绘制一个矩形时，浏览器会立即在屏幕上渲染一个矩形，但是永远不会有任何代表它的“矩形对象”。画布缓冲区中只有一堆像素。我们不能移动矩形。我们只能绘制另一个矩形。我们无法响应矩形上的点击或其他事件。我们只能响应整个画布上的事件。

因此，canvas是比SVG更底层的限制性API。但这有一个缺点，那就是使用画布您可以用相同的资源量执行更多操作。因为浏览器不必创建和维护我们绘制的所有对象的内存对象图，所以它需要更少的内存和计算资源即可绘制相同的视觉场景。如果您要绘制非常大而复杂的可视化效果，则Canvas可能是您的理想选择。

JinJin阿飞番长 2020.03.13

出于您的目的，我建议您使用SVG，因为您会获得DOM事件，例如包含鼠标操作（包括拖放）在内的DOM事件，因此您不必实现自己的重绘，也不必跟踪状态。你的对象。当您需要进行位图图像处理时，请使用Canvas；而当您要处理用HTML创建的内容时，请使用常规div。在性能方面，您会发现现代浏览器现在正在加速这三种浏览器，但是到目前为止，canvas是最受关注的。另一方面，JavaScript编写的好坏对于使画布发挥最大性能至关重要，因此我仍然建议您使用SVG。

GreenGil 2020.03.13

了解SVG和Canvas之间的差异将有助于选择正确的产品。

帆布

SVG

分辨率独立
支持事件处理程序
最适合具有较大渲染区域的应用程序（Google地图）
如果很复杂，则渲染速度较慢（经常使用DOM的东西都会很慢）
不适合游戏应用

逆天前端 2020.03.13

我同意Simon Sarris的结论：

我将Protovis（SVG）中的某些可视化与Processingjs（Canvas）进行了比较，后者显示> 2000点，并且processingjs比protovis快得多。

使用SVG处理事件当然要容易得多，因为您可以将事件附加到对象上。在“画布”中，您必须手动进行操作（检查鼠标位置等），但是对于简单的交互而言，这并不难。

还有dojo工具箱的dojo.gfx库。它提供了一个抽象层，您可以指定渲染器（SVG，Canvas，Silverlight）。尽管我不知道额外的抽象层会增加多少开销，但这可能也是一个可行的选择，但是它使交互和动画编码变得容易，并且与渲染器无关。

以下是一些有趣的基准：

阳光逆天 2020.03.13

关于divs选项，只有我2美分。

著名/臭名昭著和SamsaraJS（可能还有其他）使用绝对定位的非嵌套div（具有非平凡的HTML / CSS内容），结合matrix2d / matrix3d进行定位和2D / 3D转换，并在中等移动硬件上实现稳定的60FPS ，因此我反对divs是一个缓慢的选择。

Youtube和其他地方有很多屏幕录像，浏览器中运行着高性能2D / 3D素材，所有内容都是DOM元素，您可以以60FPS的速度检查元素（与WebGL混合以获得某些效果，但不适用于渲染的主要部分）。

卡卡西理查德 2020.03.13

尽管上面的大多数答案仍然有些道理，但我认为它们值得更新：

多年来，SVG的性能有了很大提高，现在，SVG的硬件加速CSS过渡和动画完全不依赖JavaScript性能。当然，JavaScript的性能也得到了改善，并且Canvas的性能也得到了改善，但并没有SVG得到改善。另外，今天几乎所有浏览器中都提供了一个“新手”，那就是WebGL。使用与Simon相同的词语：它击败了Canvas和SVG。但是，这并不意味着它应该成为首选技术，因为它是一种野兽，并且只能在非常特定的用例中更快。

在当今大多数用例中，恕我直言，SVG提供了最佳的性能/可用性比。可视化必须非常复杂（就元素数量而言），同时又必须非常简单（每个元素），以便Canvas甚至更多，WebGL才能真正发挥作用。

在回答类似问题时，我提供了更多详细信息，为什么我认为有时将这三种技术结合起来是您最好的选择。