Shader 和 Pass 后期处理通道 Shader 和 Pass SpriteJSNext在WebGL/WebGL2模式下，可以支持自定义Shader，这样我们就可以创建自定义的渲染模式。 比如我们要想把Path元素的背景填充修改为虚线填充，我们可以自定义Shader实现： const vertex = ` attribut...

创建layer对象 autoRender = true context evaluateFPS = false handleEvent = true renderMode = 'repaintAll' center canvas clearContext() children context id resolution timeli...

过渡 Transition 动画 Animate 滤镜 Filter 渐变 Gradient 过渡 Transition 如果我们要给元素增加一些简单的效果，可以通过transition来完成，只要在设置和改变元素的属性前调用transition方法，传入时间和可选的easing参数即可。transition的easing支持css3的easi...

简介 特性 安装和使用 架构 基本用法 简介 sprite.js 是跨平台的2D绘图对象模型库，它能够支持web、node、桌面应用和微信小程序的图形绘制和实现各种动画效果。 特性 像操作DOM对象一样操作画布上的图形元素 通过智能缓存大大提升渲染性能 支持多图层处理图形、文本、图像渲染 支持DOM事件代理、自定义事件派发 使用ES6...

Pointer 事件 其他事件 自定义事件 事件穿透 不派发事件 Pointer 事件 在基础用法：事件 里，我们介绍了sprite事件的基本原理和用法。 在 SpriteJS Next 里，元素的事件点击区域是由 isPointCollision(x, y) 方法决定的，我们可以通过改写它，来改变元素事件可点击区域。 这个方法的改写会...

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

3D 渲染 渲染3D模型 使用几何图形类 3D 渲染 SpriteJSNext提供了3D扩展 ，借助它可以加载并渲染3D模型，这样SpriteJS就可以不借助其他框架和库，独立完成3D渲染。 渲染3D模型 SpriteJSNext的3D扩展基于OGL 。 通过OGL底层，我们可以很方便地渲染出3D模型并与之交互。 const { ...

服务端渲染 服务端渲染 SpriteJS Next 通过node-canvas-webgl 支持服务端渲染，也就是说我们可以在node环境下使用spritejs，将绘制好的图形保存成png，或者将动画保存成gif。 要使用服务端渲染，要先安装 node-canvas-webgl npm install node - canvas - webgl ...

Transition 过渡动画 Web Animations API 动画的 Timeline 使用第三方动画库 Transition 过渡动画 spritejs最简单的动画方式是transition动画： // 让精灵在1s内向右移动50个像素 sprite . transition ( 1.0 ). attr ({ x : ...

文字 文字 在3D扩展中显示文字也很简单，通过layer的createText方法创建一个文字纹理，然后将它应用到对应的元素上。不过注意的是，显示的宽高比要和文字纹理的宽高比保持一致，以免文字变形。 const { Scene } = spritejs ; const { Plane , shaders } = sprit...