幾個熱門的 HTML5 Canvas Library

最近有人推薦我看了這個很瘋狂的 bombermine 遊戲，看了一下之後突然對於 Canvas 的封裝 library 有點興趣。

HTML5 Canvas 的出現其實是很棒的一件事情，以前有一段時間 Web 上的畫圖是用 Java Applet (那段時間 Web 都很醜)，後來流行 Flash 之後比較好看一點。但 HTML5 Canvas 把在 Web 上畫圖這件事情又變得更簡單一些。 Canvas 是一個基礎元件，所以提供的功能很原始，很容易使用，這是優點，但缺點是做大型專案的話使用這樣原始的 API 來做可能會有點問題。所幸有許多 Open Source 的 Canvas 封裝函氏庫可以拯救世界。（話說我稍微看了一下 bombermine 但是發現它似乎沒有用 Canvas Library …）

這邊我們針對幾套能見度比較高的 HTML5 Canvas Library 來看一下。

Fabric.js

 fabric.js 一兩年前在 StackOverflow 上的推薦度頗高，除了該具備的基本物件管理式的的 drawing 之外，這套 Library 最酷的是能夠把 SVG 轉成 Canvas。更酷的是它還能夠把 Canvas 轉成 SVG！好吧，其實也沒那麼神啦，正確來說應該是把 fabric-based 的 drawing object 轉成 SVG。另外 fabric 還支援 IE9 以下的 IE（當然是會有些限制）。

有興趣的話可以多看一點 fabric 的 demo。

Paper.js

Paper.js 似乎是目前 GitHub 上 Canvas Libaray 中獲得最多關注的其中一個。如果你已經很習慣於 DOM 的模式，那你一定會喜歡這套 Library，它有 Scene Graph 一種類似 Document Object Model 的架構。並且因此而擁有了圖層（在同一張 Canvas 上）的能力。此外，為了解決 JavaScript 無法很優雅的實作出一些數學運算的語法，Paper.js 自己定義了一套 PaperScript，於是可以讓你寫出類似這樣的點運算：

EASELJS  

EASEL.js 定義了一個階層式的 display list，於是可以很方便的管理 drawing 的物件，來看一段簡單的 sample code 就可以看出它的威力：

如上已經可以讓整個 Canvas drawing 變得很容易管理，還額外有許多 animation 以及互動事件的支援可以相當程度的簡化 Canvas 的操作。更令人欣賞的是 EASEL.JS 的文件裡面都有附簡單的 sample code！

KineticJS

KinecticJS 號稱是效能很好的 Canvas Libary，而其中的最佳化是透過多個 Canvas 來達成，從官網上看到的幾個 demo 中，似乎大部分都已經是商業化的產品了。

其他 Libaray

以上是幾個熱們的 Library 的簡單介紹，其實還有很多其他的 Library，有外國善心人整理了一份列表，似乎目前還有持續更新中，有興趣的話可以參考看看。

 
參考資料：http://jster.net/blog/brief-overview-of-html5-canvas-libraries

K

我是 K，以前幻想著可以做些偉大的事。但發現把一件簡單的事情做到很好就是一件很難又很厲害的事。所以現在正處於一個把簡單的事情做好的狀態。