Javascript 画布库的现状？

我一直在研究 HTML 画布库，遇到了这个问题。当前 HTML 画布 JavaScript 库和框架的最新状态是什么？是在2010年提出的。最好的答案是 Fabric.js。在做了一些研究之后，我发现了 http://www.html5canvastutorials.com/，它提供了 KineticJs 的教程，拥有多个画布来提高速度。稍后的研究表明，Canvas 库在速度和特性方面似乎无处不在。JavaScriptCanvas 库和框架目前的状态如何？有人在上面吗？

编辑: 由于图书馆一直在变化，最近有很多人来这里寻找关于新图书馆的新闻和信息，我改变了这个问题，使其更加永恒。

41609 次浏览
小开
最佳答案

Disclaimer: I'm the author of 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.

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.

小开

EDIT: KineticJS is no longer being actively maintained.

Disclaimer: I created 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.

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 shapes with tooltips: 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.

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

小开

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

  • 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:

  • 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" :-)

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.

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.

So, I ended up going with Kinetic because:

  • 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.

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.

小开

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

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.

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


提交答案