使用

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

<script src="https://s1.ssl.qhres.com/!9cfd5654/spritejs.min.js"></script>
<div id="container"></div>
<script>
   const imgUrl = 'https://s5.ssl.qhres.com/static/ec9f373a383d7664.svg'
   const {Scene, Sprite} = spritejs;
   const paper = new Scene('#container', 400, 400)

   const sprite = new Sprite(imgUrl)
   sprite.attr({
     bgcolor: '#fff',
     pos: [0, 0],
     size: [400, 400],
     borderRadius: '200'
   })

   paper.layer().appendChild(sprite)
</script>

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

 

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

 

運行的結果如下：

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

 

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

項目相關

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

 

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

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

 

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

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

 

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

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


作者簡介

Batiste Bieler:

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

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