SpriteJS -- 一款簡單的跨終端 canvas 繪圖框架

來自專欄奇舞周刊

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 = redcontext.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} = spritejsconst 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)

文檔

• 齊全的使用文檔：中文 | EN
• 各種各樣的例子
• 詳細的 API 文檔
• 原博文地址：SpriteJS -- Canvas動畫從未如此簡單

要深入了解 SpriteJS 或者希望給 SpriteJS 貢獻代碼，可以關注我們的 GitHub倉庫，大家的寶貴 star 是對我們最大的鼓勵和支持。如果對 SpriteJS 有疑問，或者需要了解進一步細節，可以加入 SpriteJS 官方QQ群：

http://qm.qq.com/cgi-bin/qm/qr?k=GqdoSBVDFbDSUV73vRUV47H_4iRwSak2 (二維碼自動識別)