事件 事件 Scene 自动代理了 mouse 和 touch 相关事件，因此要监听这些事件非常简单，直接使用 spirte.addEventListener 方法即可。 const { Scene , Sprite , Label , Path } = spritejs ; const container = do...

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

绘图尺寸 绘图尺寸 在 SpriteJS Next 中，绘图区域由Scene的width 和height 属性决定。 width 和height 属性影响Canvas的宽高，但是和视口（Viewport）的宽高不一定相同。默认情况下，视口由Scene的容器决定，或者也可以通过CSS样式控制。 const container = docume...

提升性能 改变缓冲区大小 组拓印（seal） 云 Cloud 提升性能 在SpriteJSNext中，由于默认对支持WebGL的环境优先使用WebGL渲染，所以性能与旧版的SpriteJS相比有明显的优势。 但是，需要注意的是，采用WebGL渲染并不意味着总是比Canvas2D要好，因为直接用Canvas2D在内存消耗方面要少一些，所以在某些...

DOM Events stopDispatch Build-in Events user delegate Custom Events Remove Events SpriteJS支持给精灵派发事件（dispatchEvent），支持DOM事件、内建事件和自定义事件。 DOM Events SpriteJS默认代理了container上的...

继承元素类型 注册元素类型 继承元素类型 我们可以继承Sprite、Label、Path等元素创建我们自己的精灵类型。 const { Scene , Label } = spritejs ; const container = document . getElementById ( 'adaptive' ); con...

服务端渲染 服务端渲染 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 : ...

渲染引擎 内存 渲染引擎 SpriteJS Next 支持多引擎，在较新的浏览器中，默认优先采用 webgl2 引擎渲染，如果不支持 webgl2 会降级为 webgl，如果不支持 webgl，会再降级为 canvas2d。 我们也可以通过Scene或者Layer的参数指定渲染引擎。 在与某些第三方库联合使用的时候，我们可能需要根据第三方库的支...

append() appendChild() clear() children insertBefore() isVirtual removeChild() scrollBy() scrollTo() SpriteJS支持将元素分组，方法是创建一个group对象，然后将元素添加到group里。 Group可以嵌套。 关于Group的详...