知名Html5 Canvas Javascript庫對比 (轉)
宣告：
轉載請保留。。
我一直在找一個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的比較。他能提供庫的開發狀態概覽以及正在用這個庫的社群。在我並不想變成某領域的專家時，我希望能依靠社群（解決問題）。
於是，我打算就文件，教程和其他資源，給出一個深入的評論。對比：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其次。
另外，在對比了國外的教程和我寫的教程後，不知道我寫的教程還有人看嗎？——雖然，我也是完全原創的，但我的技術可比不上外國作者，唉
Posted on