HTML canvas JavaScript 库和框架的最新技术是什么？ [关闭]答案

【问题标题】：What is the current state of the art in HTML canvas JavaScript libraries and frameworks? [closed]HTML canvas JavaScript 库和框架的最新技术是什么？ [关闭]
【发布时间】：2011-03-29 07:48:29
【问题描述】：

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

具体来说，是否有框架支持游戏开发所需的东西——复杂动画、管理场景图、处理事件和用户交互？

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

【问题讨论】：

如果您使用场景图和处理事件，SVG 不是更适合您的需求吗？
嗯，这就是我问的部分原因。 Canvas 绝对有动力，所以试图确定什么是可行的，什么是不可行的。当涉及到复杂的动画时，SVG 不能很好地缩放。
您是专门寻找 3D 图形还是 2D 图形，还是其中之一？
另一个不错的演示：kevs3d.co.uk/dev/asteroids。不确定他们创建的库是否可供所有人使用。一个很好的画布示例。
jsfiddle.net/user/zlatnaspirala/fiddles 试试这个框架visualJS。

标签： javascript frameworks html canvas

【解决方案1】：

我一直在研究 fabric.js - 一个画布库来帮助解决这个问题 - 通过处理事件和用户交互来操作画布上的对象。还没发布，看个简单的preview demo。

您还可以在 this design editor 中看到它的实际效果，它最初是为它创建的。

编辑：项目是now available on github（在MIT许可下开源）

要开始使用，请查看：

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。

【讨论】：

它在 IE 上的作用是什么？ ExplorerCanvas?
这是一个惊人的演示，令人印象深刻的项目
@musicfreak 是的，ExplorerCanvas。顺便说一句，它使用其原生画布支持通过了 IE9（第 4 次预览版）中的所有约 900 次测试。
fabric.js 的项目页面是否在任何地方？我很想进一步了解它。
哇，这正是我所需要的……实际上，我对管理这个库如此无缝处理的函数有多么困难感到沮丧！

【解决方案2】：

我很惊讶没有人提到WebGL，以及基于它构建的框架。我认为它在 HTML 画布/javascript 上的 3D GPU 加速图形和复杂动画的最新技术列表中名列前茅。

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

WebGL 为网络带来无插件的 3D，直接在浏览器中实现。主要浏览器厂商苹果（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。

【讨论】：

Three.js 在 webgl 上运行
@nube：好点。 Three.js 可以在 WebGL、SVG 或普通 (2D) 画布上呈现。

【解决方案3】：

three.js，mr. doob，是一个出色的 javascript 3d 引擎，包括场景图（软件和 WebGL/硬件加速版本）、阴影、粒子、蒙皮动画（我认为）和灯光效果。看看吧，他是一个超级有才华的家伙。

我应该补充一点，您将需要最新的 Google Chrome 或同等版本才能查看大多数演示，我最喜欢的一个是：http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html

【讨论】：

这个演示实际上更好：carvisualizer.plus360degrees.com/threejs

【解决方案4】：

KineticJS 是一个崭露头角的库，它拥有在画布上创建和动画各个“层”以实现高性能。

http://www.kineticjs.com/

【讨论】：

github.com/ericdrowell/KineticJS/#mothballed 说“我将不再维护这个 repo 或 KineticJS 官方网站，因为我已经转向其他企业和项目”并且 GitHub 报告了 147 个未解决的问题

【解决方案5】：

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

这里有演示 - http://glimr.rubyforge.org/cake/canvas.html, http://glimr.rubyforge.org/cake/missile_fleet.html

【讨论】：

太棒了。看起来相当精致。在操作系统的世界中，您距离被积极维护只有 1 个爱好者 :)

【解决方案6】：

看看processingjs 框架。此外，即将推出的 mootools 2.0 版具有 art projekt 与画布一起使用

【讨论】：

ProcessingJS 是解决这个问题的一种有趣方法，但它本质上是用 JavaScript 实现的过程 DSL，不确定它是否可以扩展到非平凡的应用程序。将检查 MooTools 选项。
是的，Processing 是一种数据即原型语言。有一个 Javascript 端口这一事实很简洁，但这很难使它成为一个 HTML 5 框架。
问题是关于画布框架而不是 html5，这就是 processingJS 是什么。
请原谅我的语义错误。 Canvas 框架就是我想要的。

【解决方案7】：

Raphael 似乎是一个不错的画布库；它基于 SVG（或在 Internet Explorer 中基于 VML），因此支持大量用户输入事件。它相当小（60kb gzipped），所以不是太大的依赖。
它似乎也有一个不错的补间：http://raphaeljs.com/reference.html#animate（参见here 和here 示例）。

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

希望这会有所帮助！

【讨论】：

SVG 与画布不同

【解决方案8】：

我发现两个库非常有竞争力，而且比 fabric 好得多。

Kinetic.js 和 easel.js 都具有极好的事件处理、分组和一般形状抽象。你会在这两者中找到很多值得爱的地方；画架似乎有更多的图像导向和过滤。

Fabric 的事件处理程序比其中任何一个都差 - 基本上它将整个画布视为一个大型事件 rrapper，并在单击“某物”时告诉您。它不会将事件附加到单个形状或形状组。

【讨论】：

FWIW，Fabric 现在允许您将事件直接附加到对象并具有通用组功能。

【解决方案9】：

interesting library 旨在改进使用 canvas API 的一些基础知识，称为 canto.js，由 Javascript: The Definitive Guide 的作者 David Flanagan 编写。

【讨论】：

可能是处理更高级别内容的框架的有用基础。

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

http://www.bhivecanvas.com

和

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

【讨论】：

【解决方案12】：

Aves Engine 真的很棒：http://www.dextrose.com/en/projects/aves-engine

另外，秋叶原好像不错：http://www.kesiev.com/akihabara/

【讨论】：

Aves 尚未发布，显然不使用画布。不过，令人印象深刻的演示。
Aves 根本不用画布，看看这个：paulbakaus.com/2010/07/19/…

【解决方案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/），您会发现从矢量图形到图像再到以编程方式创建的阴影的所有示例。

【讨论】：

【解决方案14】：

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

【讨论】：

【解决方案15】：

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

欢迎反馈和 cmets。 http://www.quietless.com/kitchen/introducing-js3/

【讨论】：