SpriteJS 是一款由360奇舞團開源的跨終端 canvas 繪圖框架，可以基於 canvas 快速繪製結構化 UI、動畫和互動效果，併發布到任何擁有canvas環境的平臺上（比如瀏覽器、小程式和node）。
- 官方網站：http://spritejs.org
- Github地址：https://github.com/spritejs/spritejs
- DEMO示例：http://spritejs.org/demo/
為什麼要開發 SpriteJS
我們知道，canvas API可以很靈活地繪製各種向量圖形到畫布上，但是 canvas API 本身比較低階，比如我們要在畫布中央繪製一個帶有圓角的紅色矩形，使用 canvas 原生的 API，需要這樣：
const canvas = document.getElementById('paper')
const context = canvas.getContext('2d')
const [x, y, w, h, r] = [200, 200, 200, 200, 50]
context.fillStyle = 'red'
context.beginPath()
context.moveTo(x + r, y)
context.arcTo(x + w, y, x + w, y + h, r)
context.arcTo(x + w, y + h, x, y + h, r)
context.arcTo(x, y + h, x, y, r)
context.arcTo(x, y, x + w, y, r)
context.closePath()
context.fill()
複製程式碼如果實現相同的效果，使用 SpriteJS 是這樣寫：
const scene = new spritejs.Scene('#container')
const layer = scene.layer()
const s = new spritejs.Sprite({
anchor: 0.5,
bgcolor: 'red',
pos: [300, 300],
size: [200, 200],
borderRadius: 50,
})
layer.append(s)
複製程式碼Sprite 為圖形建立類似於 DOM 的物件模型，因此我們可以像建立 DOM 元素一樣，建立 Sprite 元素，並將它們 append 到 layer 上，從而將元素呈現到畫布上。SpriteJS 有如下特點：
- 基於 canvas 繪製的文件物件模型
- 四種基本精靈型別：Sprite、Path、Label、Group
- 支援基礎和高階的精靈屬性，精靈盒模型、屬性與 CSS3 具有高度一致性。
- 簡便而強大的 Transition、Animation API
- 支援雪碧圖和資源預載入
- 可擴充套件的事件機制
- 高效能的快取策略
- 對 D3、Matter-js、Proton和其他第三方庫友好
- 跨平臺，支援服務端渲染、微信小程式
基本使用介紹
通過 NPM 或者直接載入 CDN 版本即可使用 SpriteJS
npm install spritejs —save
複製程式碼<script src="//lib.baomitu.com/spritejs/2.0.0-alpha.28/spritejs.min.js"></script>
複製程式碼注：在服務端使用需要安裝 node-canvas
下面是簡單的用法示例，大家也可以直接訪問 JSBin 檢視效果。
const {Scene, Sprite} = spritejs
const scene = new Scene('#demo-quickStart', {viewport: [770, 200], resolution: [3080, 800]})
const layer = scene.layer()
const robot = new Sprite('https://p5.ssl.qhimg.com/t01c33383c0e168c3c4.png')
robot.attr({
anchor: [0, 0.5],
pos: [0, 0],
})
robot.animate([
{pos: [0, 0]},
{pos: [0, 300]},
{pos: [2700, 300]},
{pos: [2700, 0]},
], {
duration: 5000,
iterations: Infinity,
direction: 'alternate',
})
layer.append(robot)
複製程式碼文件
要深入瞭解 SpriteJS 或者希望給 SpriteJS 貢獻程式碼，可以關注我們的 GitHub倉庫，大家的寶貴 star 是對我們最大的鼓勵和支援。如果對 SpriteJS 有疑問，或者需要了解進一步細節，可以加入 SpriteJS 官方QQ群：