[开源] 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 = '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="http://www.v2ex.com//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) 

文档

• 齐全的使用文档：中文 | EN
• 各种各样的例子
• 详细的 API 文档

要深入了解 SpriteJS 或者希望给 SpriteJS 贡献代码，可以关注我们的 GitHub 仓库，大家的宝贵 star 是对我们最大的鼓励和支持。如果对 SpriteJS 有疑问，或者需要了解进一步细节，可以加入 SpriteJS 官方 QQ 群：801359678