HTML canvas JavaScript 库和框架的当前技术水平是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3474608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the current state of the art in HTML canvas JavaScript libraries and frameworks?
提问by Toby Hede
I am currently investigating options for working with the canvas in a new HTML 5 application, and was wondering what is the current state of the art in HTML canvas JavaScript libraries and frameworks?
我目前正在研究在新的 HTML 5 应用程序中使用画布的选项，并且想知道 HTML 画布 JavaScript 库和框架的当前状态是什么？
In particular, are there frameworks that support the kind of things needed for game development - complex animation, managing scene graphs, handling events and user interactions?
特别是，是否有支持游戏开发所需的框架——复杂动画、管理场景图、处理事件和用户交互？
Also willing to consider both commercial and open source products.
也愿意考虑商业和开源产品。
回答by kangax
I've been working on fabric.js— a canvas library to help with exactly that — manipulating objects on canvas, by handling events and user interactions. It's not released yet, but take a look at a simple preview demo.
我一直在研究fabric.js——一个画布库来帮助解决这个问题——通过处理事件和用户交互来操作画布上的对象。它尚未发布，但请看一个简单的预览演示。
You can also see it in action in this design editor, which it was originally created for.
您还可以在最初为其创建的设计编辑器中看到它的运行情况。
Edit:The project is now available on github(open-sourced under MIT License)
编辑：该项目现在在 github 上可用（在 MIT 许可下开源）
To get started, check out:
要开始，请查看：
- Demos(simple & complex, with code to show how they're done)
- Fabric.js presentation at FalsyValues(and another one at BK.js)
- Wiki on github(including FAQ)
- Documentation
- Google Group(ask any question there)
- Fabric.js on twitter(or short questions via twitter)
- Introduction to Fabric.js: Part 1(article on ScriptJunkie)
- Introduction to Fabric.js: Part 2(article on ScriptJunkie)
- 演示（简单和复杂，带有代码来展示它们是如何完成的）
- FalsyValues 上的 Fabric.js 演示（以及BK.js 上的另一个）
- github 上的 Wiki（包括FAQ）
- 文档
- Google Group（在那里提出任何问题）
- 推特上的 Fabric.js（或推特上的简短问题）
- Fabric.js 简介：第 1 部分（关于 ScriptJunkie 的文章）
- Fabric.js 简介：第 2 部分（关于 ScriptJunkie 的文章）
How does Fabric compare to other Javascript canvas libraries? Here's a comparison table.
Fabric 与其他 Javascript 画布库相比如何？这是一个比较表。
回答by LarsH
I'm surprised no one has mentioned WebGL, and frameworks built on it. I would consider it high on the list for state-of-the-art for 3D GPU-accelerated graphics and complex animation on HTML canvas / javascript.
我很惊讶没有人提到WebGL和基于它的框架。我认为它在 HTML 画布/javascript 上的 3D GPU 加速图形和复杂动画的最先进技术列表中名列前茅。
WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces. ...
WebGL brings plugin-free 3D to the web, implemented right into the browser. Major browser vendors Apple (Safari), Google (Chrome), Mozilla (Firefox), and Opera (Opera) are members of the WebGL Working Group.
WebGL 是基于 OpenGL ES 2.0 的低级 3D 图形 API 的跨平台、免版税网络标准，通过 HTML5 Canvas 元素作为文档对象模型接口公开。...
WebGL 为网络带来了无插件的 3D，直接在浏览器中实现。主要的浏览器供应商 Apple (Safari)、Google (Chrome)、Mozilla (Firefox) 和 Opera (Opera) 都是 WebGL 工作组的成员。
WebGL is very solid in its support for GPU-accelerated graphics. Check out these GLSL shaderdemos. :-) And see ChemDoodleas an example of user interaction.
WebGL 在支持 GPU 加速图形方面非常可靠。查看这些 GLSL着色器演示。:-) 并将ChemDoodle作为用户交互的示例。
I've been working on an app using Google's O3Dframework, which manages the scene graph, and uses WebGL for rendering (it used to use its own plug-in). O3D is a work in progress, and its documentation is not completely up to date, but it is under active development, and there are some good demos out there. 3D Poolmay be most up your alley. The Google developers are very responsive to questions in the discussion group.
我一直在使用 Google 的O3D框架开发一个应用程序，该框架管理场景图，并使用 WebGL 进行渲染（它曾经使用自己的插件）。O3D 是一项正在进行的工作，它的文档不是完全最新的，但它正在积极开发中，并且有一些很好的演示。3D 泳池可能最适合您。Google 开发人员对讨论组中的问题非常敏感。
There are a number of other frameworks built on WebGL; see here. Ones that mention game development and scene graphs include Copperlicht, SceneJS, X3DOM.
还有许多其他框架构建在 WebGL 之上；看到这里。提到游戏开发和场景图的包括 Copperlicht、SceneJS、X3DOM。
WebGL runs in recent development builds of several browsers, but not IE. I've been using Firefox ("Minefield") and Chromium with good results. You will need one of these to run the above demos.
WebGL 在多个浏览器的最新开发版本中运行，但不能在 IE 中运行。我一直在使用 Firefox（“Minefield”）和 Chromium，效果很好。您将需要其中之一来运行上述演示。
However if your requirements are that it must have no dependencies beyond HTML 5 canvas / js, WebGL may not be the right choice. It doesn't look like IE will support itanytime soon.
但是，如果您的要求是它必须没有超出 HTML 5 canvas / js 的依赖项，那么 WebGL 可能不是正确的选择。它看起来并不像IE浏览器将支持它很快。
Update:after putting up a lot of resistance, MS decided to support WebGL in IE 11.
更新：在经受了很多阻力之后，MS决定在 IE 11 中支持 WebGL。
回答by alteveer
three.js, by mr. doob, is a fantastic 3d engine for javascript that includes scenegraph (both software and WebGL/hardware accelerated versions), shading, particles, skinned animation (i think), and lighting effects. Check it out, he is a super-talented fellow.
三.js，由先生。doob是一款出色的 javascript 3d 引擎，包括场景图（软件和 WebGL/硬件加速版本）、阴影、粒子、蒙皮动画（我认为）和灯光效果。一看就知道是个超有才的人。
I should add that you are going to need the newest Google Chrome or equivalent to view most of the demos, one of my favorites is: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html
我应该补充一点，您将需要最新的 Google Chrome 或同等版本才能查看大部分演示，我最喜欢的一个是：http: //mrdoob.github.com/three.js/examples/webgl_materials_cars.html
回答by ericbowden
KineticJS is an up-and-coming library that boasts creating and animating individual "layers" on the canvas for high performance.
KineticJS 是一个新兴的库，它吹嘘在画布上创建和动画单独的“层”以获得高性能。
回答by Castrohenge
CAKE.js is no longer being maintained but is a fairly powerful framework - http://code.google.com/p/cakejs/
CAKE.js 不再维护，而是一个相当强大的框架 - http://code.google.com/p/cakejs/
Demos here - http://glimr.rubyforge.org/cake/canvas.html, http://glimr.rubyforge.org/cake/missile_fleet.html
演示在这里 - http://glimr.rubyforge.org/cake/canvas.html, http://glimr.rubyforge.org/cake/missile_fleet.html
回答by Donald Harvey
Raphaelseems a pretty good canvas library; it's SVG-based (or VML-based in Internet Explorer), and thus supports a lot of user input events. It's fairly small (60kb gzipped), so isn't too large a dependency.
It seems to have a nice tweener too: http://raphaeljs.com/reference.html#animate(see hereand herefor examples).
Raphael似乎是一个不错的画布库；它基于 SVG（或在 Internet Explorer 中基于 VML），因此支持大量用户输入事件。它相当小（压缩后为 60kb），因此依赖关系不是太大。
它似乎也有一个很好的 tweener：http://raphaeljs.com/reference.html#animate （参见这里和这里的示例）。
For an example of what it can do, have a look at this clever little demo.
有关它可以做什么的示例，请查看这个聪明的小演示。
Hope this helps!
希望这可以帮助！
回答by Andreas K?berle
Take a look at the processingjsframework. Also the upcoming mootools version 2.0 has the art projektto work with canvas
看一下processingjs框架。即将推出的 mootools 2.0 版也有与画布一起工作的艺术项目
回答by Dave Edelhart
I have found two libraries to be extremely competitive and much better then fabric.
我发现有两个库非常有竞争力，而且比fabric 好得多。
Kinetic.js and easel.js both have extremely good event handling, grouping and general shape abstraction. You'll find a lot to love in both of these; easel seems to have more image oriented and filtering.
Kinetic.js 和easel.js 都具有非常好的事件处理、分组和一般形状抽象。你会发现这两者都有很多值得爱的地方；画架似乎有更多的图像导向和过滤。
Fabric's event handlins is MUCH worse than either of these - basically it treats the whole canvas as one big event rrapper and tells you when "Something" has been clicked on. It doesn't attach events to individual shapes or groups of shapes.
Fabric 的事件处理比其中任何一个都糟糕得多 - 基本上它将整个画布视为一个大事件 rrapper 并告诉您何时单击了“Something”。它不会将事件附加到单个形状或形状组。
回答by Alex Savin
Also, young, but not bad, Javascript framework, and it (complex animation, managing scene graphs, handling events and user interactions) all about it - jCanvaScript. May be, except 'managing scene graphs'.
此外，年轻但不坏的 Javascript 框架，以及它（复杂的动画、管理场景图、处理事件和用户交互）都是关于它的 - jCanvaScript。可能是，除了“管理场景图”。
回答by ZonerTone
Been working with bHive to produce graphs and moving site headers, seems impressive and powerful, unlike the others seems to be being developed. Adobe Edge is also worth a gander though strictly not Canvas.
一直在与 bHive 合作生成图表和移动站点标题，看起来令人印象深刻且功能强大，不像其他人似乎正在开发。Adobe Edge 也值得一试，但严格来说不是 Canvas。
and
和
