使用

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 项目。