幾個熱門的 HTML5 Canvas Library
![](https://www.icoding.co/wp-content/uploads/2013/03/html5-canvas-670x350.png)
最近有人推薦我看了這個很瘋狂的 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,以前幻想著可以做些偉大的事。但發現把一件簡單的事情做到很好就是一件很難又很厲害的事。所以現在正處於一個把簡單的事情做好的狀態。
Great!
nice.. thx and god bless … ^__^