SpriteJS ^Next 是SpriteJS的新版本，在浏览器端支持 webgl2 渲染，并可向后兼容降级为 webgl 和 canvas2d。

特性

• 像操作DOM对象一样操作画布上的图形元素
• WebGL2渲染
• 多图层处理图形、文本、图像渲染
• DOM事件代理、自定义事件派发
• 使用ES6+语法和面向对象编程
• OffscreenCanvas和Web Worker多线程渲染
• 结构化对象树，对引擎友好，能够无缝使用
• 服务端渲染

如果你使用NPM进行包管理，可以直接使用npm命令安装

安装完之后可以使用ESModule加载：

由于spritejs是跨平台的，如果在node环境中跑，需要自行安装依赖库node-canvas

npm install canvas@next

如果你在浏览器中直接使用，可以使用CDN版本

可能需要先安装一下依赖：

sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++

然后安装node-canvas 2.x：

3D 扩展

SpriteJS^Next 通过加载并渲染3D模型。

可以通过CDN加载扩展库：

或通过NPM加载：

import {Scene} from 'spritejs';
import {Cube, shaders} from 'sprite-extend-3d';

与旧版本主要差异

• 丰富了精灵类型

  • 在原有的 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 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, 300]},
  {pos: [2700, 300]},
  {pos: [2700, 0]},
], {
  duration: 5000,
  iterations: Infinity,
  direction: 'alternate',
});