Javascript Canvas 库的现状？ [关闭]

免责声明：我是 Fabric.js 的作者。

我想说 Easel.js、Fabric.js 和 Paper.js 是目前最常用的。我根据每个存储库的 Github 观察者数量、他们的 Google 群组中的讨论量以及我在 Twitter 上听到它们用作画布库的频率来判断。

这些也具有或多或少的文档、示例/演示、讨论组和单元测试（大多数其他画布库中的测试状态非常可悲）。

我还在维护此 comparison table of various canvas libraries，您可以在其中查看库的更新时间、大小、对 IE<9 或 node.js 的支持等等。

---

编辑： KineticJS 不再被积极维护。

免责声明：我创建了 KineticJS

KineticJS 实际上做得很好。您可以在 Github 找到源代码，目前有 2180 人在该处加注星标。

它可以处理数千个并发形状：

10,000 次拖放压力测试：http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

10,000 个带有工具提示的形状：http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

它有非常好的事件支持，包括移动事件，并且它有一套相当稳固的 100 套单元测试，所以代码库感觉相当稳固。

kangax：PS 与fabric.js 的工作很棒！除了 KineticJS（当然），我最喜欢的另外两个库是 fabric 和 paper。

---

对于最近的读者，截至 2013 年 1 月，我评估了：

动力学

织物

纸

画架

通过“评估”，我所做的不仅仅是阅读文档；我创建了一个原型应用程序。

我从 Fabric 开始，因为它似乎拥有最大的社区，并认为这将是我的解决方案。但是，我放弃了 Fabric，原因如下：

奇怪且未记录的 API 不一致，不必要地浪费了我很多时间。

不一致的指针事件支持。具体来说，Fabric 并不认为“路径”是一个可选择和可观察的真实形状对象。这不符合我的需求，因为交互式路径是我的应用程序的主要要求。

在幕后添加到 Canvas 的翻译以定位对象。对我来说，Fabric 试图在这方面过于聪明，但开发人员并不清楚它在做什么。

对移动、调整大小和旋转交互如何工作的意见过于强烈。在许多方面，将这个功能内置到框架中是很棒的，但就我而言，我不同意它的实现方式，这意味着无论如何都必须自己重新实现它。

稀疏文档 - 很多情况下，方法的文档采用以下形式：“setX(Y) - set's the X to Y” :-)

我看了看Paper，并没有走得太远。它对我来说似乎过于迟钝，而且也介于 IMO 之间——它是一个太多的可视化库，不能成为 Canvas 的简单对象模型，但它还不足以与 D3 竞争。另外，文档也不是特别容易访问。

如果您有 Flash/ActionScript 背景，我认为 Easel 可能很有意义，但我没有。另外，对于我的要求，它似乎过于专注于游戏。棺材里的钉子又是文件——不够，而且以非标准格式呈现。

所以，我最终选择了 Kinetic，因为：

非常丰富清晰的教程和示例

API 函数做他们所谓的事情，并且在很大程度上是可以猜测的——更快的生产力，更浅的学习曲线

相当清楚它做什么和不做什么 - 它不像其他一些那样富有，但这是一个好处；它做的事情更少但做得更好

路径是一等公民形状，就像任何其他形状一样，这对我的要求至关重要。

Kinetic 无论如何都不是完美的，有几次我不得不深入研究源代码以找出幕后实际发生的事情。另外，我想念 Fabric 的 SVG 解析和输出。

---

我强烈推荐pixijs。它是一个高性能的画布库。

Pixi.js 是一个 2D webGL 渲染器，具有无缝画布后备，使其能够在所有现代浏览器（包括桌面和移动设备）上工作。

http://www.goodboydigital.com/pixi-js-is-out/

---