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

107

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

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

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

— 托比·海德（Toby Hede）
source

如果您使用场景图和处理事件，SVG是否更适合您的需求？

— Joeri Sebrechts 2010年

好吧，这就是我要问的部分原因。画布肯定具有动量atm，因此请尝试确定什么是可行的，什么不是。当涉及复杂的动画时，SVG的缩放比例不是很好。

— Toby Hede

您是专门在寻找3D图形，还是2D图形，还是两者之一？

— LarsH 2010年

另一个不错的演示在这里：kevs3d.co.uk/dev/asteroids。不知道他们创建的库是否可供所有人使用。画布是一个很好的例子。

— Castrohenge

jsfiddle.net/user/zlatnaspirala/fiddles尝试使用此框架visualJS。

— Nikola Lukic

96

Fabric.js截图

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

您还可以在最初为其创建的设计编辑器中查看它的运行情况。

编辑：该项目现在可以在github上使用（在MIT许可证下开源）

首先，请查看：

演示（简单和复杂，并通过代码演示如何完成）
Fabric.js呈现在FalsyValues（和另一个在BK.js）
github上的Wiki（包括FAQ）
文献资料
Google网上论坛（在此处询问任何问题）
Twitter上的Fabric.js（或通过Twitter的简短问题）
Fabric.js简介：第1部分（有关ScriptJunkie的文章）
Fabric.js简介：第2部分（有关ScriptJunkie的文章）

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

— 甘加克斯
source

它在IE上做什么？ExplorerCanvas？

— Sasha Chedygov

14

这是一个了不起的演示，令人印象深刻的项目

— 卸载

3

@musicfreak是的，ExplorerCanvas。顺便说一句，它使用其本机画布支持通过了IE9（第4个预览版）中的所有900项测试。

— kangax

4

哪里有fabric.js的项目页面？我对了解更多信息很感兴趣。

— Arne Roomann-Kurrik

哇，这正是我所需要的...实际上，让这个库如此无缝地处理功能有多么困难令我感到沮丧！

— Shouvik

17

令我惊讶的是，没有人提到WebGL和基于它的框架。对于3D GPU加速的图形和HTML canvas / javascript上的复杂动画，我认为它是最先进的。

WebGL是基于OpenGL ES 2.0的低级3D图形API的跨平台，免版税的Web标准，通过HTML5 Canvas元素作为文档对象模型接口公开。...

WebGL将无插件的3D引入网络，并直接在浏览器中实现。主要的浏览器供应商Apple（Safari），Google（Chrome），Mozilla（Firefox）和Opera（Opera）是WebGL工作组的成员。

WebGL对GPU加速图形的支持非常可靠。查看这些GLSL 着色器演示。:-)并以ChemDoodle作为用户交互的示例。

我一直在使用Google的O3D框架开发一个应用程序，该框架管理场景图，并使用WebGL进行渲染（它曾经使用自己的插件）。O3D尚在开发中，其文档尚未完全更新，但仍处于积极开发中，并且有一些不错的演示。3D Pool可能最适合您。Google开发人员非常乐意讨论组中的问题。

还有许多其他基于WebGL构建的框架。看这里。提到游戏开发和场景图的人包括Copperlicht，SceneJS和X3DOM。

WebGL在几种浏览器的最新开发版本中运行，但不是IE。我一直在使用Firefox（“雷区”）和Chromium，效果很好。您将需要其中之一来运行以上演示。

但是，如果您的要求是除HTML 5 canvas / js之外必须没有依赖项，WebGL可能不是正确的选择。它看起来并不像IE浏览器将支持它很快。

更新：在产生了很大的阻力之后，MS 决定在IE 11中支持WebGL。

— 拉尔斯
source

Three.js在webgl上运行

— JqueryToAddNumbers

@nube：好点。Three.js可以在WebGL，SVG或纯（2D）画布上呈现。

— LarsH 2011年

15

three.js所，由先生。doob是一款出色的javascript 3D引擎，其中包括Scenegraph（软件和WebGL /硬件加速版本），阴影，粒子，蒙皮动画（我认为）和照明效果。检查一下，他是一个非常有才华的家伙。

我应该补充一点，您将需要最新的Google Chrome浏览器或等效的Chrome浏览器来查看大多数演示，我的最爱之一是：http : //mrdoob.github.com/three.js/examples/webgl_materials_cars.html

— 高度
source

1

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

— 皮埃尔·亨利

13

KineticJS是一个新兴的库，拥有在画布上创建和设置各个“图层”动画的功能，以实现高性能。

http://www.kineticjs.com/

— 埃里克博登
source

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

— xmojmr，

8

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

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

— 卡斯特罗亨吉
source

2

太棒了看起来相当精致。在OS的世界中，只有1名狂热者无法积极维护它们：)

— Toby Hede 2010年

6

看一下processing.js框架。另外，即将发布的mootools 2.0版具有与画布配合使用的艺术作品

— 安德烈亚斯·科伯勒（AndreasKöberle）
source

3

ProcessingJS是解决该问题的一种有趣方法，但是从本质上讲，它是用JavaScript实现的过程DSL，但不确定它可以扩展到非平凡的应用程序。将检查MooTools选项。

— Toby Hede

是的，处理是一种数据即原型语言。有一个Javascript端口的事实很简洁，但这很难使它成为HTML 5框架。

— Peter Bailey 2010年

问题是关于一个不是html5的画布框架，那就是什么ProcessingJS。

— AndreasKöberle，2010年

原谅我的语义错误。Canvas框架就是我要的。

— 彼得·贝利

6

拉斐尔似乎是一个很好的画布库。它基于SVG（或Internet Explorer中基于VML），因此支持很多用户输入事件。它相当小（压缩后为60kb），因此依赖性也不大。
它似乎也具有很好的补间功能：http：//raphaeljs.com/reference.html#animate （请参见此处和此处的示例）。

有关它可以做什么的示例，请看一下这个聪明的小演示。

希望这可以帮助！

— 唐纳德·哈维
source

10

SVG与画布并不是一回事

— Toby Hede 2010年

4

我发现两个库极具竞争力，并且比fabric好得多。

Kinetic.js和easyl.js都具有非常好的事件处理，分组和常规形状抽象。在这两个方面，您都会发现很多值得爱的地方。画架似乎具有更多面向图像和过滤的功能。

Fabric的事件提要比这两种方法都差得多-基本上，它将整个画布视为一个大事件说唱歌手，并告诉您何时单击了“ Something”。它不会将事件附加到单个形状或形状组。

— 戴夫·埃德哈特
source

2

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

— kangax

3

有一个有趣的库，旨在改善使用canvas.js的画布API的一些基础知识，该API被Javascript：The Definitive Guide的作者David Flanagan所使用。

— 未安装
source

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

— Toby Hede 2010年

3

而且，它还很年轻，但是还不错，它（复杂的动画，管理场景图，处理事件和用户交互）－jCanvaScript。可能是这样，除了“管理场景图”。

— 亚历克斯·萨文
source

3

与bHive一起制作图形和移动站点标题的过程似乎令人印象深刻且功能强大，与其他正在开发的项目不同。Adobe Edge也值得一提，尽管严格来说不适合使用Canvas。

http://www.bhivecanvas.com

和

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

— ZonerTone
source

2

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

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

— CrociDB
source

Aves尚未发布，并且显然不使用画布。相当令人印象深刻的演示。

— Toby Hede 2010年

鸟类完全不使用帆布，看看这个：paulbakaus.com/2010/07/19/...

— alcuadrado

2

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

— 高手
source

1

秋叶原作为游戏引擎给我留下了深刻的印象。它具有教程和api形式的出色文档。我什至在某些留言板上看到有关秋叶原2发行的消息。不幸的是，所有这些谈论都已经有一年或更久了。我真的希望该引擎仍在开发中。

— 马克·H
source

1

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

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

— 布赖特施
source