[译]知名Html5 Canvas Javascript库对比

声明:

原文链接: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库:

这儿还有一些我没有研究过的库,因为他们没有架在Github上,或者看起来没人更新了:

在Github上的对比

关注 分支 问题
CAAT 336 42 17
EaselJS 1,440 203 90
fabric.js 1,059 101 38
gury 348 19 9
jCanvaScript 80 5 2
Kinetic.js 267 41 7
oCanvas 194 20 6
Paper.js 1,706 111 30
processing.js 1,276 206 N/A

最小体积对比

代码量 (kb)
CAAT 210
EaselJS 44
fabric.js 133
gury 11
Kinetic.js 53
oCanvas 18

不过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

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

摘要

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

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

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

EaselJS

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

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

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

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

内置对触摸设备的支持

fabric.js

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

  • 创建和操作(移动,缩放,旋转…)矢量图形和文本对象
  • 导入/导出成SVG或反过来

总结起来就是“一个在canvas上的可交互对象模型”。

如果你的目的是建立复杂场景,动态对象,在我看来他不是正确选择

Paper.js

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

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

processing.js

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

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

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

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

Kinetic.js

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

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

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

结论

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

最后,我决定用Kinetic.js,因为:

  1. 我觉得示例代码不错
  2. 作者本身写了一个优秀的系列教程
  3. 文档和例子都很清晰易懂
  4. 我要的库里都有了(我并不觉得在我做到20%的时候却需要引进另一个大库比如TweenJS来解决个小问题会让我高兴)

请不吝分享你的评论,或者我没提到的库,谢谢。

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

译者的总结:

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

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

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

《[译]知名Html5 Canvas Javascript库对比》有5个想法

  1. 我个人也在开发canvas库 不过当我看到 jCanvaScript 这个库的时候,我放弃了造轮子,因为我想要的语法格式什么的 跟他很相似. 语法很简单, 程序员可以很容易上手,他就是一个canvas方法的封装.只不过增加了事件 拖动机制. 压缩后也就 52k左右.我一开始选择canvas 库的时候, 选择了 Rapha?l kineticjs.我个人认为 在初学的时候,可以选择jcanvasscript进行辅助了解canvas . 等学会了 有必要再去掌握别的时候,原理明白了 也就只有一些语法不同而已

  2. 我个人也在开发canvas库 不过当我看到 jCanvaScript 这个库的时候,我放弃了造轮子,因为我想要的语法格式什么的 跟他很相似. 语法很简单, 程序员可以很容易上手,他就是一个canvas方法的封装.只不过增加了事件 拖动机制. 压缩后也就 52k左右.我一开始选择canvas 库的时候, 选择了 Raphaël kineticjs.我个人认为 在初学的时候,可以选择jcanvasscript进行辅助了解canvas . 等学会了 有必要再去掌握别的时候,原理明白了 也就只有一些语法不同而已

发表评论

电子邮件地址不会被公开。