简介
SpriteJS 是跨平台的高性能图形系统，它能够支持web、node、桌面应用和小程序的图形绘制和实现各种动画效果。
SpriteJS Next 是SpriteJS的新版本，在浏览器端支持 webgl2 渲染，并可向后兼容降级为 webgl 和 canvas2d。
特性
- 像操作DOM对象一样操作画布上的图形元素
- WebGL2渲染
- 多图层处理图形、文本、图像渲染
- DOM事件代理、自定义事件派发
- 使用ES6+语法和面向对象编程
- OffscreenCanvas和Web Worker多线程渲染
- 结构化对象树，对d3引擎友好，能够无缝使用
- 服务端渲染
- Vue
更多特性，访问 next.spritejs.org
安装和使用
如果你使用NPM进行包管理，可以直接使用npm命令安装
npm install @spritejs/next由于spritejs是跨平台的，如果在node环境中跑，需要自行安装依赖库node-canvas
npm install canvas@next如果你在浏览器中直接使用，可以使用CDN版本
<script src="https://unpkg.com/@spritejs/next/dist/spritejs.js"></script>如果你要在node服务端使用spritejs渲染，你需要安装node-canvas
可能需要先安装一下依赖：
sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++然后安装node-canvas 2.x：
npm install canvas@next架构
SpriteJS Next 提供若干类基础精灵元素，可以像操作DOM元素一样在图层上操作它们。
与旧版本主要差异
增强
-
丰富了精灵类型
- 在原有的 Sprite、Path、Label、Group基础上增加了Polyline、Ellipse、Arc、Ring、Regular、Triangle、Rect等矢量图形类元素。
- 将元素分为块元素（Block）和矢量路径元素（Path）两个大类，有着不同的盒模型和渲染方式。
-
支持WebGL渲染
- 因为默认使用WebGL2渲染，大大提升性能。
-
支持多线程
- 可以使用LayerWorker多线程模式，让不同的Layer运行在不同的线程。
改变策略
- 简化了Scene的适配方式
- 将原有的resolution和viewport配置简化为width和height，相当于原有的resolution，viewport默认根据容器自动适配。
- 适配模式简化为
static, scale, stickyWidth, stickyHeight, stickyTop, stickyBottom, stickyLeft, stickyRight八种。
弱化
-
弱化了Label类
- 去掉了对多行文字和文字排版的支持。
-
暂时不支持布局
- 暂不支持原有的flex布局，在后续版本中考虑让块元素支持flex布局。
-
不支持CSS
- 去掉了CSS支持。
基本用法
const {Scene, Sprite} = spritejs;
const container = document.querySelector('#stage');
const scene = new Scene({container, width: 3080, height: 800, mode: 'stickyTop'});
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);