SpriteJS 是一款由 360 奇舞团开源的跨终端 canvas 绘图框架,可以基于 canvas 快速绘制结构化 UI、动画和交互效果,并发布到任何拥有 canvas 环境的平台上(比如浏览器、小程序和 node )。
- 官方网站: http://spritejs.org
- Github 地址: https://github.com/spritejs/spritejs
- DEMO 示例: http://spritejs.org/demo/
![5437343-914aba90c339545e.gif](https://upload-images.jianshu.io/upload_images/5437343-914aba90c339545e.gif)
image
为什么要开发 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)
文档
转载于:https://www.jianshu.com/p/2680d6140645