Javascript Canvas 库的现状？

Current State of Javascript Canvas Libraries?

提问by ericbowden

I have been doing research on HTML canvas libraries and I came across this question. What is the current state of the art in HTML canvas JavaScript libraries and frameworks?that was asked in 2010. The top answer was Fabric.js. After doing a bit more research I came across http://www.html5canvastutorials.com/which features tutorials on KineticJs, that boasts having multiple canvases for speed. A bit more research later revealed that Canvas libraries seem to be all over the place when it comes to speed and features. What is the current state of JavaScript Canvas libraries and frameworks today? Has one come out on top?

我一直在研究 HTML 画布库，我遇到了这个问题。HTML canvas JavaScript 库和框架的当前技术水平是什么？这是 2010 年提出的问题。最佳答案是 Fabric.js。在做了更多的研究之后，我发现了http://www.html5canvastutorials.com/，其中包含有关 KineticJs 的教程，它拥有多个画布以提高速度。后来的更多研究表明，在速度和功能方面，Canvas 库似乎无处不在。当今 JavaScript Canvas 库和框架的现状如何？有没有脱颖而出？

EDIT: Since libraries are ever changing and a lot of people have recently been coming here for news and info on new libraries I changed the question to be more timeless.

编辑：由于图书馆不断变化，而且很多人最近都来这里获取有关新图书馆的新闻和信息，因此我将问题更改为更加永恒。

采纳答案by kangax

Disclaimer: I'm the author of Fabric.js.

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

I would say that Easel.js, Fabric.js, and Paper.js are among the most used at the moment. I'm judging by the number of Github watchers for each repository, volume of discussion in their Google Groups, and how often I hear about them used as canvas libraries on Twitter.

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

These are also the ones with more or less decent documentation, examples/demos, discussion groups, and unit tests (the state of testing in most other canvas libraries is pretty sad).

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

I'm also maintaining this comparison table of various canvas libraries, where you can see how recently the library was updated, its size, support for IE<9 or node.js, and more.

我还在维护这个各种画布库的比较表，您可以在其中查看库的更新时间、大小、对 IE<9 或 node.js 的支持等。

回答by Eric Rowell

EDIT: KineticJS is no longer being actively maintained.

编辑：不再积极维护 KineticJS。

Disclaimer: I created KineticJS

免责声明：我创建了 KineticJS

KineticJS is actually doing pretty well. You can find the source code at Github, where it is starred by 2180 people at the moment.

KineticJS 实际上做得很好。你可以在Github 上找到源代码，目前有 2180 人在那里加星。

It can handle thousands of concurrent shapes:

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

10,000 drag and drop stress test: 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-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

10,000 shapes with tooltips: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

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

It has very good event support, including mobile events, and it has a pretty solid suite of 100's of unit tests so the code base feels pretty solid.

它有非常好的事件支持，包括移动事件，并且它有一个非常可靠的 100 个单元测试套件，因此代码库感觉非常可靠。

kangax: P.S. awesome work with fabric.js! Other than KineticJS (of course), my other two favorite libraries are fabric and paper.

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

回答by Jeremy Burton

For recent readers, as of Jan 2013, I evaluated:

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

• Kinetic
• Fabric
• Paper
• Easel

• 动力学
• 织物
• 纸
• 画架

By "evaluated", I did more than just read the docs; I created a prototype app.

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

I started with Fabric because it seemed to have the largest community and thought that it would be my solution. But, I gave up on Fabric for the following reasons:

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

• weird and undocumented API inconsistencies that burned a lot of my time unnecessarily.
• inconsistent pointer event support. Specifically, Fabric does not consider a "Path" to be a true shape object that is selectable and observable. This did not meet my needs since interactive Paths are a major requirement of my app.
• behind the scenes additions of translations to the Canvas to position objects. For me, Fabric tries to be too clever in this regard without being clear to the developer what it's doing.
• overly strong opinion on how move, resize and rotate interactivity works. In many ways, it's great to have this functionality built into the framework but, in my case, I didn't agree with the way it was implemented which meant essentially having to reimplement it myself anyway.
• sparse documentation - lot's of those cases where the documentation of a method is of the form: "setX(Y) - set's the X to Y" :-)

• 奇怪且未记录的 API 不一致，不必要地浪费了我很多时间。
• 不一致的指针事件支持。具体来说，Fabric 不会将“路径”视为可选择和可观察的真实形状对象。这不能满足我的需求，因为交互式路径是我的应用程序的主要要求。
• 在幕后添加对画布的翻译以定位对象。对我来说，Fabric 试图在这方面过于聪明，而没有让开发人员清楚它在做什么。
• 关于移动、调整大小和旋转交互性如何工作的观点过于强烈。在许多方面，将此功能内置到框架中是很棒的，但就我而言，我不同意它的实现方式，这意味着无论如何必须自己重新实现它。
• 稀疏文档 - 很多情况下，方法的文档采用以下形式：“setX(Y) - 将 X 设置为 Y”:-)

I took a look at Paper and didn't get too far. It seemed overly obtuse to me and also falls between too stools IMO - it's too much of a visualization library to be a simple object model for Canvas but it's not enough of a visualization library to compete with D3. Plus, the documentation again was not particularly accessible.

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

I think Easel probably makes a lot of sense if you have a Flash/ActionScript background but I do not. Plus, it seemed overly game-focused for my requirements. The nail in the coffin was again documentation - not enough and presented in non-standard format.

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

So, I ended up going with Kinetic because:

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

• really rich and clear tutorials and examples
• API functions do what they're called and are largely guessable - faster productivity, shallower learning curve
• is reasonably clear about what it does do and what it doesn't - it's not as rich as some of the others but that's a benefit; it does fewer things but does them better
• Paths are first-class citizen Shapes, like any other Shape, which was essential for my requirements.

• 非常丰富和清晰的教程和示例
• API 函数做他们所谓的事情并且在很大程度上是可以猜测的 - 更快的生产力，更浅的学习曲线
• 相当清楚它做什么和不做什么 - 它不像其他一些那样丰富，但这是一个好处；它做的事情更少，但做得更好
• 路径是一等公民形状，就像任何其他形状一样，这对我的要求至关重要。

Kinetic is not perfect by any means and there have been a few times when I've had to dive deep into the source code to work out what's actually going on under the covers. Plus, I miss the SVG parsing and output of Fabric.

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

回答by bendangelo

I would highly recommend pixijs. Its a high performance canvas library.

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

Pixi.js is a 2D webGL renderer with a seamless canvas fallback that enables it to work across all modern browsers both desktop and mobile.

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

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

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