知名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
於是，我打算就文檔，教程和其他資源，給出一個深入的評論。對比：EaselJS, fabric.js, Paper.js, processing.js 以及這個外來者：Kinetic.js,來做個選擇。
摘要
EaselJS, fabric.js, Paper.js, processing.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，因爲：
- 我覺得示例代碼不錯
- 作者本身寫了一個優秀的系列教程
- 文檔和例子都很清晰易懂
- 我要的庫裏都有了（我並不覺得在我做到20%的時候卻需要引進另一個大庫比如TweenJS來解決個小問題會讓我高興）
請不吝分享你的評論，或者我沒提到的庫，謝謝。
—————————————————-
譯者的總結：
翻譯完了覺得這文章有點像Kinetic.js的軟廣告。不過，上面的所有庫功能都是非常強大的，日常應用毫無問題。Kinetic.js是綜合來講比較合理的一個——功能中等，體積中等。
個人覺得fabric.js最強大，體積也最大；Paper.js其次。
另外，在對比了國外的教程和我寫的教程後，不知道我寫的教程還有人看嗎？——雖然，我也是完全原創的，但我的技術可比不上外國作者，唉