A [译]知名Html5 Canvas Javascript库对比

2013.06.24 BY 十年灯·6条评论
声明：
原文链接： http://www.softr.li/blog/2012/06/20/which-html5-canvas-javascript-library-should-i-use
本译文地址： http://jo2.org/html5-canvas-libary-introduction/
印象：

#《我应该选哪个Canvas库？》译文（以下的“我”是指原作者）

我一直在找一个Html5 canvas库，可以让我创建可交互的、带动画的UI界面。我的要求是：

良好的文档，支持与维护，因为我想在以后的项目里还能重用它

可以轻松的创造复杂的图形对象（我的工程比较复杂，可不是一个简单的按钮那样的活儿），最好能支持分组和多层

能帮我处理用户交互

支持触摸设备

提供用于作动态图形的工具
我搜了一些适合的库，想和你分享我的搜索成果。在可用的库的名单后面，我调查了这些库：EaselJS,fabric.js,Paper.js,processing.js和Kinetic.js，希望能帮你做出你自己的选择。

一 我找到的库

这儿是一些迄今为止看起来还有人维护的Canvas库：
CAAT
EaselJS
Fabric.js
Gury
JcanvaScript
Kinetic.js
oCanvas
Paper.js
processing.js

这儿还有一些我没有研究过的库，因为他们没有架在Github上，或者看起来没人更新了：
cakejs
Doodle-js
CanvasToolkit
Mootools Canvas lib

二 在Github上的对比

不过jCanvaScript,Paper.js和processing.js在Github是没有压缩版

四 在Stackoverflow的比较

搜索词 标签 # 被标记的问题 # 搜索到的问题
CAAT N/A N/A 5
EaselJS easeljs 30 79
fabric.js fabricjs 43 78
jCanvaScript N/A N/A 6
Kinetic.js kineticjs 74 30
oCanvas N/A N/A 19
Paper.js paperjs 9 49
processing.js processing.js 117 289
gury库在stackoverflow上没找到，我用N/A标识了没找到的。

五 对文档，教程和其他资源的研究

在选择框架时，我更看重Github的比较。他能提供库的开发状态概览以及正在用这个库的社区。在我并不想变成某领域的专家时，我希望能依靠社区（解决问题）。

但是，StackOverflow(SO)太有用了，尤其在已经有人问了比较问题的时候，比如：Current state of Javascript canvas libraries

六 深入评论

于是，我打算就文档，教程和其他资源，给出一个深入的评论。对比：EaselJS, fabric.js, Paper.js, processing.js 以及这个外来者：Kinetic.js,来做个选择。

0 摘要

EaselJS, fabric.js, Paper.js, processing.js可以看作是4个领头者，他们有很明确的庞大用户社区，也架设在Github上，文档完善，大量的引用（就是在SO上的问题，以及论坛），更好的是，根据SO上他们之前的问题，他们是有单元测试的。

Kinetic.js是个后来者，最近才上线Github，还有很多变数，但受到了kangax的（Fabric.js的作者）热烈欢迎。

这4个库都有Github地址，都基于MIT许可发布。

1 EaselJS

这个库是CreateJS 套件的一部分，是一个全功能的用来创建先进html5交互与动画图形库。

特别的是，结合动画库（TweenJS），可以创建很复杂的动画！如果你打算开发游戏，你还可以用SoundJS库和资源预载入库（PreloadJS）搞定。

这个网站提供了一些漂亮的示例，源码可以和Github宝库上找到。

这个库看起来也能和其他库协同工作，比如Box2d和TexturePacker.

内置对触摸设备的支持

2 fabric.js

查看官网发现，此库貌似偏向建立“矢量图形编辑工具”。主要特色有：

创建和操作（移动，缩放，旋转…）矢量图形和文本对象

导入/导出成SVG或反过来
总结起来就是“一个在canvas上的可交互对象模型”。
如果你的目的是建立复杂场景，动态对象，在我看来他不是正确选择。

3 Paper.js

这个库是Scriptographer库的一部分。他有个特长是其Paperscript语言，基于一个提供了对点和图形精妙进行精妙数学操作的Javascript扩展——但是，他仍然没有文档。

这个库的强大在于，他在建立复杂矢量对象和管理鼠标交互上出类拔萃。然而，他没有实现对移动设备的支持，而且其动画能力貌似被 onFrame() 这个方法限制了——每秒被调用60次，也允许你改变canvas的内容。

4 processing.js

这个库的核心目标是建立可视化交互

这个库有个独特的历史——他是著名的Processing库的一个接口。我说著名，不是因为我自己知道，而是因为他在多媒体艺术社区非常知名，用来进行交互式艺术创造。

请看这第一个示例,看起来此库打算降低在canvas上创建交互式图形动画的学习曲线。他提供了易用的循环，和一个 draw() 方法，你可以简单的建立你的可视化交互。

我认为，因为其学习曲线低，对没有开发能力的艺术家们是完美的，但并不是建立面向对象组件的最佳工具。

5 Kinetic.js

Kinetic.js本是这次比较的门外汉，因为在他的Github上看起来，他离最多人使用的那个还很远。然而，如果搜索”canvas library”的话，他的html5教程是排在第一位的，而且，他在SO上也有很多不错的提问。

这个名字是个很好的线索，但这个库在处理大量对象的时候蛮快的，因为使用了多canvas技术。

他提供了很好的文档讲解和教程，包括系统的html5 canvas应用，详细的Kinetic.js和Three.js文档。他也提供了些好用的小提示——不是针对这个库的，有的是对于canvas。

6 结论

基于本篇评论，我认为我应该用EaselJS或Kinetic.js。Paper.js也不错但是不支持触摸设备，我敢肯定要集成这个功能并不复杂，但我更喜欢库中本来就有的。

最后，我决定用Kinetic.js，因为：

我觉得示例代码不错

作者本身写了一个优秀的系列教程

文档和例子都很清晰易懂

我要的库里都有了（我并不觉得在我做到20%的时候却需要引进另一个大1. 库比如TweenJS来解决个小问题会让我高兴）
请不吝分享你的评论，或者我没提到的库，谢谢。

—————————————————-

七 译者的总结：

翻译完了觉得这文章有点像Kinetic.js的软广告。不过，上面的所有库功能都是非常强大的，日常应用毫无问题。Kinetic.js是综合来讲比较合理的一个——功能中等，体积中等。

个人觉得fabric.js最强大，体积也最大；Paper.js其次。

另外，在对比了国外的教程和我写的教程后，不知道我写的教程还有人看吗？——虽然，我也是完全原创的，但我的技术可比不上外国作者，唉

B 有哪些值得推荐的开源 JavaScript Canvas 库，分别有哪些优势和劣势？

https://www.zhihu.com/question/19796641
作者：rambo
我个人认为 在初学的时候,可以选择jcanvasscript进行辅助了解canvas . 等学会了 有必要再去掌握别的时候,原理明白了 也就只有一些语法不同而已

作者：吴立志
链接： https://www.zhihu.com/question/19796641/answer/131856479

Processing.js

Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下，可以实现程序图像、动画和互动的应用。Processing.js是轻量，易于了解掌握的理想工具，可用于可视化的数据，创建用户界面和开发基于Web的游戏。

FABRIC.JS

FABRIC.JS是一款简单而强大的JavaScript Canvas 库，提供了互动的对象模型，同时还包含 Canvas-to-SVG 解析器。

oCanvas

oCanvas是一个JavaScript框架，用于简化HTML5 Canvas标签的使用，可以利用对象来代替像素。 oCanvas 可以帮助你很容易的在 HTML5 的 Canvas 标签上创建对象，并且创建这些对象的动画。

jCanvas

jCanvas 就是一个 jQuery 的绘图插件，它封装了一些绘制图形的方法，只需编写几行代码即可生成图形。

RGraph

RGraph是一个使用HTML5 Canvas标签实现的图表制作Library。利用该Library生成的Chart具有可交互性，当鼠标点击或移过时会显示相应的信息，可以动态加载Chart或对特殊点进行缩放。

Two.js

Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合：SVG，Canvas 和 WebGL，旨在使平面形状和动画的创建更方便，更简洁。

Paper.js

Paper.js是一款开源的矢量图形脚本框架，基于 HTML5 Canvas 开发，提供清晰的场景图、DOM和大量强大的功能用来创建各种向量图和贝塞尔曲线。

EaselJS

EaselJS 是一个封装了 HTML5 画布(Canvas) 元素的 JavaScript 库。

Kinetic.JS

Kinetic.JS 是一个封装了 HTML5 Canvas的JavaScript 库，能为桌面和移动应用提供高性能动画，转场效果，节点嵌套，分层，滤镜，缓存，事件处理以及更多功能。

Pixi.js

Pixi.js 是一个 2D webGL 渲染器，提供无缝 Canvas 回退，支持主流浏览器，包括桌面和移动。人生很短暂，过着过着你就没了，明白吗？JS攻城师你若有前端干货，欢迎前来投稿，一起执笔分享思考—-前端范。 http://weixin.qq.com/r/UHWwqHbEnCvjrTLL9yBC
公众号：js_gcs代码也是一种思考艺术编辑于 2016-11-18

C Fabric.js – 简单而强大的 JavaScript Canvas 库

http://www.cnblogs.com/lhb25/archive/2013/03/14/fabric-js-canvas-library.html

Fabric.js 是一个简单而强大的 JavaScript Canvas 库，在 HTML5 Canvas 元素之上提供了互动的对象模型，同时还包含 Canvas-to-SVG 解析器。

使用 Fabric.js 你可以创建和填充画布上的对象，从简单的几何图形到成百上千路径组成的复杂图形。你可以通过鼠标轻松的移动、缩放和旋转这些对象，修改它们的属性（颜色、透明度，层叠顺序）等等。

/图表类库/

D 20 个最棒的 JavaScript 图表库

http://www.imooc.com/article/1427
2015-08-26 10:33:36
$_YX: https://app.yinxiang.com/shard/s67/nl/18114453/8f5e4997-b58a-4864-9e6e-6c5819ef4780?title=20%20%E4%B8%AA%E6%9C%80%E6%A3%92%E7%9A%84%20JavaScript%20%E5%9B%BE%E8%A1%A8%E5%BA%93_%E6%85%95%E8%AF%BE%E6%89%8B%E8%AE%B0

E Boarder成熟作品

Z 实际

1. 不用成熟作品
2. 原生canvas已成熟，欠面向对象，移动，旋转等操作
3. 利用库，仅oCanvas重写就可以了：体积小，文档全，操作简单，适合本（小）项目。（没必要使用那么大的库）
4. 原生没有做移动设备，希望oCanvas可以处理

15:33

1. A [译]知名Html5 Canvas Javascript库对比
   1. 一 我找到的库
   2. 二 在Github上的对比
   3. 三 最小体积对比
   4. 四 在Stackoverflow的比较
   5. 五 对文档，教程和其他资源的研究
   6. 六 深入评论
      1. 0 摘要
      2. 1 EaselJS
      3. 2 fabric.js
      4. 3 Paper.js
      5. 4 processing.js
      6. 5 Kinetic.js
      7. 6 结论
   7. 七 译者的总结：
2. B 有哪些值得推荐的开源 JavaScript Canvas 库，分别有哪些优势和劣势？
   1. Processing.js
   2. FABRIC.JS
   3. oCanvas
   4. jCanvas
   5. RGraph
   6. Two.js
   7. Paper.js
   8. EaselJS
   9. Kinetic.JS
   10. Pixi.js
3. C Fabric.js – 简单而强大的 JavaScript Canvas 库
4. D 20 个最棒的 JavaScript 图表库
5. E Boarder成熟作品
6. Z 实际