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

https://i.stack.imgur.com/9jV0S.png

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

您还可以在最初创建它的 this design editor 中看到它的运行情况。

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

要开始，请查看：

演示（简单而复杂，带有代码来展示它们是如何完成的）

FalsyValues 上的 Fabric.js 演示（以及 BK.js 上的另一个）

github 上的 Wiki（包括常见问题解答）

文档

谷歌集团（在那里提出任何问题）

twitter 上的 Fabric.js（或通过 twitter 提出简短的问题）

Fabric.js 简介：第 1 部分（关于 ScriptJunkie 的文章）

Fabric.js 简介：第 2 部分（关于 ScriptJunkie 的文章）

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

---

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

WebGL 是一个跨平台、免版税的 Web 标准，用于基于 OpenGL ES 2.0 的低级 3D 图形 API，通过 HTML5 Canvas 元素作为文档对象模型接口公开。 ... WebGL 将无插件 3D 带入网络，直接在浏览器中实现。主要浏览器供应商 Apple (Safari)、Google (Chrome)、Mozilla (Firefox) 和 Opera (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，由 mr. doob 开发，是一款出色的 3d javascript 引擎，包括场景图（软件和 WebGL/硬件加速版本）、着色、粒子、蒙皮动画（我认为）和灯光效果。看看，他是一个超级有才华的人。

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

---

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

http://www.kineticjs.com/

---

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

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

---

查看 processingjs 框架。此外，即将推出的 mootools 版本 2.0 有 art projekt 可用于画布

---

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

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

希望这可以帮助！

---

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

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

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

---

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

---

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

---

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

http://www.bhivecanvas.com

和

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

---

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

另外，秋叶原看起来不错：http://www.kesiev.com/akihabara/

---

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

---

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

---

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

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

---