使用

sprite.js 的使用十分簡單,就像普通的圖形庫一樣,以官方的 quick start 為例:

先導入 sprite.js,然後聲明一張畫布,將其與 id 為 container 的容器綁定,並規定 400*400 的大小。

 

然後,聲明一個精靈對象,從 imgUrl 載入圖片設置紋理,其後設置其屬性,這些屬性名簡單易懂,便不贅述了,值得注意的是,sprite 具有圖層功能,所以在添加精靈到畫布上時,還需要指出圖層。

 

運行的結果如下:

開源項目精選:sprite.js ——跨平台的2D繪圖對象模型庫

就是在頁面左上角顯示了一張圖片。

 

註:該項目有中文文檔,感興趣的不妨前去一看。

項目相關

sprite.js 目前可與 31 款已通過庫或其他工具一起使用,下面介紹三種:

 

1.d3.js(一個用來做數據可視化的 JavaScript 的函數庫)

sprite.js 與 d3.js 兼容,可以做出條狀圖,分層,地圖和強制鏈接

 

2.Proton(一個輕量級但是強大的JavaScript小引擎)

sprite.js可以和Proton一起做出火焰特效,小的背景和其他你想自定義的東西

 

3.Matter-js (一個 JavaScript 2D 剛體物理引擎。)

可以做出不同的形狀的物體,並一起出現

開源項目精選:sprite.js ——跨平台的2D繪圖對象模型庫

開源項目精選:sprite.js ——跨平台的2D繪圖對象模型庫

作者簡介

Batiste Bieler:

瑞典人,有自己的個人博客:http://batiste.info

在 github 上有多個  python 和 JavaScript 項目。