HTML canvas JavaScript库和框架的当前最新技术是什么？

Question

我目前正在调查在新的HTML 5应用程序中使用canvas的选项，并且想知道HTML canvas JavaScript库和框架中当前的最新技术状态是什么？

特别是，是否有框架支持游戏开发所需的东西 - 复杂的动画，管理场景图，处理事件和用户交互？

也愿意考虑商业和开源产品。

Answer 1

我一直致力于 fabric.js - 一个画布库来帮助完全实现 - 通过处理事件和用户交互来操纵画布上的对象。它尚未发布，但请看一个简单的preview demo。

您还可以在最初为其创建的this design editor中查看它。

修改：项目为now available on github（根据麻省理工学院许可证开源）

要开始使用，请查看：

• Demos（简单和复杂，代码显示它们是如何完成的）
• Fabric.js presentation at FalsyValues（和another one at BK.js）
• Wiki on github（包括FAQ）
• Documentation
• Google Group（在那里问任何问题）
• Fabric.js on twitter（或通过推特提出的简短问题）
• Introduction to Fabric.js: Part 1（关于ScriptJunkie的文章）
• Introduction to Fabric.js: Part 2（关于ScriptJunkie的文章）

Fabric如何与其他Javascript画布库进行比较？这是一个comparison table。

Answer 2

我很惊讶没有人提到WebGL，并且基于它建立了框架。我认为它在HTML canvas / javascript上的3D GPU加速图形和复杂动画的最新技术列表中占据了很高的位置。

  

WebGL是一个跨平台的   免版税的网络标准   基于的低级3D图形API   OpenGL ES 2.0，通过暴露   HTML5 Canvas元素作为Document   对象模型接口。 ...

     

WebGL的   将无插件的3D带入网络，   在浏览器中实现。   主要浏览器供应商Apple（Safari），   谷歌（Chrome），Mozilla（火狐），   和歌剧（Opera）是成员   WebGL工作组。

WebGL在支持GPU加速图形方面非常扎实。看看这些GLSL shader demos。 :-)并将ChemDoodle视为用户交互的一个例子。

我一直在使用Google的O3D框架开发应用程序，该框架管理场景图，并使用WebGL进行渲染（它曾经使用自己的插件）。 O3D是一项正在进行的工作，其文档并不完全是最新的，但它正在积极开发中，并且有一些good demos out there。 3D Pool可能是您胡同中最重要的。 Google开发人员对讨论组中的问题非常敏感。

在WebGL上构建了许多其他框架; see here。提到游戏开发和场景图的人包括Copperlicht，SceneJS，X3DOM。

WebGL在several browsers的最新开发版本中运行，但不在IE中运行。我一直在使用Firefox（“Minefield”）和Chromium，效果很好。您将需要其中一个来运行上述演示。

但是，如果您的要求是它必须没有HTML 5 canvas / js之外的依赖关系，那么WebGL可能不是正确的选择。它很快就会doesn't look like IE will support it。

在提出大量阻力后，

更新：，MS decided to support WebGL in IE 11。

Answer 3

<{> 3}}，three.js，是javascript的精彩3D引擎，包括scenegraph（软件和WebGL /硬件加速版本），阴影，粒子，皮肤动画（我认为）和照明效果。看看，他是一个非常有才华的人。

我应该补充一点，您需要使用最新的Google Chrome或同等产品来查看大部分演示，我最喜欢的一个是：mr. doob

Answer 4

KineticJS是一个崭露头角的图书馆，它拥有在画布上创建和动画个别“图层”的高性能。

http://www.kineticjs.com/

Answer 5

CAKE.js不再被维护，但是是一个相当强大的框架 - http://code.google.com/p/cakejs/

此处演示 - http://glimr.rubyforge.org/cake/canvas.html，http://glimr.rubyforge.org/cake/missile_fleet.html

Answer 6

看看processingjs框架。即将推出的mootools 2.0版还有art projekt可以使用canvas

Answer 7

Raphael似乎是一个非常好的画布库;它是基于SVG的（或基于VML的Internet Explorer），因此支持许多用户输入事件。它相当小（60kb gzip），所以依赖性不是太大 它似乎也有一个很好的tweener：http://raphaeljs.com/reference.html#animate（例如，请参阅here和here。）

有关它可以做什么的示例，请查看this clever little demo。

希望这有帮助！

Answer 8

我发现两个图书馆极具竞争力，而且比面料要好得多。

Kinetic.js和easel.js都具有非常好的事件处理，分组和一般形状抽象。你会在这两个方面找到很多值得爱的东西;画架似乎有更多的图像导向和过滤。

Fabric的事件handlins比其中任何一个都糟糕得多 - 基本上它将整个画布视为一个大事件rrapper并告诉你什么时候点击了“Something”。它不会将事件附加到单个形状或形状组。

Answer 9

有一个interesting library旨在通过canto.js的作者David Flanagan改进使用名为Javascript: The Definitive Guide的画布API的一些基础知识。

Answer 10

此外，年轻但不错的Javascript框架，以及它（复杂的动画，管理场景图，处理事件和用户交互）都是关于它的 - jCanvaScript。可能是，除了“管理场景图”。

Answer 11

正在与bHive合作制作图表和移动网站标题，看起来令人印象深刻且功能强大，不像其他人似乎正在开发中。 Adobe Edge也值得一试，但严格来说不是Canvas。

http://www.bhivecanvas.com

和

http://labs.adobe.com/technologies/edge/

Answer 12

Aves Engine非常棒：http://www.dextrose.com/en/projects/aves-engine

此外，秋叶原似乎很好：http://www.kesiev.com/akihabara/

Answer 13

如果你想使用Javascript，Dojo是一个很好的方式。它具有紧凑的跨平台（SVG，VML，Canvas，Silverlight）矢量图形API，功能非常强大。您可以在dojo.gfx和dojox.gfx中找到它。

我们用这个来构建一个互动物理辅导员，让学生绘制矢量，椭圆等（甚至附加图像）并对它们进行各种变换。您可以在http://gideon.eas.asu.edu/web-UI/login.html查看我们已完成的操作 - 只需使用任何用户名登录。

我看过fabric.js和dojox.drawing做了很多相同的事情。如果您查看工具包中的测试（一旦获得它的dojox / drawing / tests /），您就可以找到从矢量图形到图像到以编程方式创建阴影的所有示例。

Answer 14

我对秋叶原作为游戏引擎印象深刻。它以教程和api的形式提供了出色的文档。我甚至在一些留言板上看到了关于秋叶原2发布的谈话。不幸的是，所有谈话都是一年或更长时间。我真的希望这个引擎仍在开发中。

Answer 15

我刚刚发布了新绘图的第一次迭代＆amp;补间库面向具有AS3 / Flash开发背景的人。虽然我的lib还不支持复杂的绘图路径或图表，但我希望它能帮助人们快速绘制＆amp;以熟悉的方式动画基本原语。

欢迎提供反馈和意见。 http://www.quietless.com/kitchen/introducing-js3/