Javascript Canvas库的当前状态?

我一直在研究HTMLcanvas库,我遇到了这个问题。 HTML canvas JavaScript库和框架中的艺术现状是什么? 这在2010年被问到。最好的答案是Fabric.js。 在做了一些更多的研究之后,我遇到了http://www.html5canvastutorials.com/ ,其中有关于KineticJs的教程,这个教程拥有多个速度的canvas。 稍后的研究表明Canvas库在速度和function方面似乎已经遍布全球。 目前JavaScript Canvas库和框架的当前状态是什么? 有一个出来?

编辑:由于图书馆是不断变化,最近有很多人来到这里为新图书馆的新闻和信息,我改变了这个问题更加永恒。

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

我会说Easel.js,Fabric.js和Paper.js是目前使用最多的。 我正在评估每个存储库的Github监视器的数量,他们的Google网上论坛的讨论量,以及我在Twitter上多久听到有关他们被用作canvas库的信息。

这些也是那些或多或less体面的文件,例子/演示,讨论组和unit testing(大多数其他canvas库的testing状态是相当悲伤的)。

我还维护着各种canvas库的比较表 ,您可以在这里看到库最近更新了多less,它的大小,对IE <9或node.js的支持等等。

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

免责声明:我创build了KineticJS

KineticJS实际上做得很好。 你可以在Github上find源代码,目前它由2180个人主演。

它可以处理数以千计的并发形状:

10,000次拖放压力testing: 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个unit testing套件,所以代码基础感觉非常稳固。

kangax:PS真棒与fabric.js工作! 除了KineticJS(当然),我另外两个最喜欢的库是织物和纸。

对于最近的读者,截至2013年1月,我评估:

  • 动力学
  • 画架

通过“评估”,我所做的不仅仅是阅读文档。 我创build了一个原型应用。

我从Fabric开始,因为它似乎拥有最大的社区,并认为这将是我的解决scheme。 但是,由于以下原因,我放弃了Fabric:

  • 奇怪的和无证的API不一致,导致我不必要地浪费了很多时间。
  • 不一致的指针事件支持。 具体而言,Fabric不会将“path”视为可以select和可观察的真实形状对象。 这不符合我的需求,因为互动path是我的应用程序的主要要求。
  • 幕后添加了翻译到canvas来定位对象。 对我而言,Fabric在这方面试图过于聪明,而不清楚开发者正在做什么。
  • 如何移动,调整和轮换互动性工作过于强烈的意见。 在很多方面,将这个functionembedded到框架中是非常好的,但是在我的情况下,我并不同意它被实现的方式,这意味着无论如何本质上必须重新实现它。
  • 稀疏的文档 – 很多情况下,方法的文档的forms是:“setX(Y) – 设置的X到Y”:-)

我看了看纸,并没有太多。 对于我来说,这看起来过于沉闷,而且也落在大凳子之间IMO – 对于Canvas而言,它只是一个可视化库,不过是一个简单的对象模型,但它不足以与D3进行竞争。 另外,文件再次不是特别方便。

我认为如果你有Flash / ActionScript的背景,Easel可能会有很大的意义,但是我不这样做。 另外,我的要求似乎过于注重游戏。 棺材里的钉子又是一个文件 – 不够用非标准的格式。

所以,我最终与Kinetic一起去了,因为:

  • 真正的丰富和明确的教程和例子
  • API函数完成他们所谓的function,而且大部分都是可以猜测的 – 更快的生产力,更浅的学习曲线
  • 对于它做什么和不做什么是相当清楚的 – 它不像其他的一样丰富,但这是一个好处; 它做更less的事情,但做得更好
  • path是一stream的公民形状,就像任何其他形状,这是我的要求至关重要。

动力学并不是完美无缺的,有几次我不得不深入到源代码中来研究实际发生的事情。 另外,我错过了Fabric的SVGparsing和输出。

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

Pixi.js是一个2D webGL渲染器,具有无缝的canvas回退function,可以在所有现代浏览器(包括桌面和移动设备)上工作。

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