多线程 多线程 SpriteJS Next 支持 OffscreenCanvas 和多线程，我们可以给 Layer 设置参数 {worker: URL} 来创建一个在 worker 中运行的 Layer。 // 主线程 const container = document . getElementById ( 'stage' ); ...

CSS 样式 SpriteJS的CSS样式限制： CSS 样式 SpriteJS从v2.22开始支持使用CSS。在HTML页面上可以加载CSS，使用CSS3选择器给SpriteJS元素添加样式。 要支持CSS样式，只要在创建Scene时，将参数useDocumentCSS 设置为true。 const scene = new Sce...

块元素 锚点 anchor 边框 border 内边距 padding 盒子 boxSizing 精灵 Sprite 文字 Label 分组 Group SpriteSvg 块元素 块元素是指有外盒（outer box）和内容盒（content box）的元素。 SpriteJS Next的块元素继承基类Block ，主要有Spri...

3D 扩展 安装 坐标和相机 绘制几何体 绘制模型 光照 与元素交互 3D 扩展 SpriteJSNext可以通过3D扩展库 来渲染3D元素。 安装 加载3D渲染库的方式非常简单，你可以直接通过CND加载 <script src = "https://unpkg.com/spritejs@3/dist/spritejs.es....

分组 分组 与2D一样，3D扩展支持分组，我们可以创建Group3d元素。 const { Scene } = spritejs ; const { Cube , Sphere , Group3d , shaders } = spritejs . ext3d ; const container = doc...

服务端渲染 微信小程序 服务端渲染 spritejs通过node-canvas 支持服务端渲染，也就是说我们可以在node环境下使用spritejs，将绘制好的图形保存成png，或者将动画保存成gif。 将静态输出保存成png const fs = require ( 'fs' ) const { Scene , Lab...

简介 特性 安装和使用 3D 扩展 架构 与旧版本主要差异 增强 改变策略 弱化 基本用法 简介 SpriteJS 是跨平台的高性能图形系统，它能够支持web、node、桌面应用和小程序的图形绘制和实现各种动画效果。 SpriteJS Next 是SpriteJS的新版本，在浏览器端支持 webgl2 渲染，并可向后兼容降级为 w...

路径元素 路径 path 矩形 三角形和平行四边形 折线和多边形 正多边形和星形 圆弧和椭圆弧 圆环 路径元素 SpriteJS Next 的路径元素不同于块元素，块元素更类似于HTML的inline-block元素，而路径元素则更类似于SVG。 路径元素包括以下元素： Arc 圆弧与扇形 Ellipse 椭圆弧与椭圆扇形 Par...

外部时钟 外部时钟 SpriteJS有自己的canvas内容更新机制，只要layer中的元素的属性有变化，layer就会将该元素放到等待刷新的列表中，在下一个渲染周期内刷新。这是SpriteJS内置的更新机制。 不过，SpriteJS可以使用外部时钟进行canvas更新。这使得它对很多第三方库非常友好。 SpriteJS要指定layer使用外部时...

使用jsx语法 配置babel 更多参考 使用jsx语法 通过配置babel，spritejs可以使用jsx语法 JSBin const { Group , Path , Scene , Sprite } = spritejs const scene = new Scene ( '#demo-qui...