SpriteJS是360奇舞团开源的跨端canvas绘图框架，可以基于canvas快速绘制结构化UI、动画和交互效果，并发布到任何具有画布环境的平台（例如浏览器、小程序和节点）。官网：http://spritejs.orgGithub地址：https://github.com/spritejs/s...DEMO示例：http://spritejs.org/demo/为什么要开发SpriteJS我们知道canvasAPI可以可以很灵活的在canvas上绘制各种矢量图形，但是canvasAPI本身比较底层。例如，如果我们想在画布的中心绘制一个圆角的红色矩形，使用画布的原生API，我们需要这样：constcanvas=document.getElementById('paper')constcontext=canvas.getContext('2d')const[x,y,w,h,r]=[200,200,200,200,50]context.fillStyle='red'context.beginPath()context.moveTo(x+r,y)context.arcTo(x+w,y,x+w,y+h,r)context.arcTo(x+w,y+h,x,y+h,r)context.arcTo(x,y+h,x,y,r)context.arcTo(x,y,x+w,y,r)context.closePath()context.fill()实现同样的效果，使用SpriteJS是这样写的：constscene=newspritejs.Scene('#container')constlayer=scene.layer()consts=newspritejs.Sprite({anchor:0.5,bgcolor:'red',pos:[300,300],size:[200,200],borderRadius:50,})layer.append(s)Sprite为图形创建一个类似DOM的对象模型，所以我们可以像DOM元素一样创建Sprite元素，并将它们附加到图层上，从而将元素渲染到画布上.SpriteJS具有以下特点：基于canvas绘制的文档对象模型的四种基本sprite类型：Sprite、Path、Label、Group，支持基本和高级sprite属性，spritebox模型和属性与CSS3高度一致。简单强大的Transition，AnimationAPI支持Sprite和资源预加载可扩展的事件机制高性能的缓存策略对D3、Matter-js、Proton等第三方库友好跨平台，支持服务端渲染，微信小程序基本介绍使用SpriteJSnpminstallspritejs--save注意：Node-canvas需要安装在服务器端。下面是一个简单的使用示例。也可以直接访问JSBin查看效果。const{Scene,Sprite}=spritejsconstscene=newScene('#demo-quickStart',{viewport:[770,200],resolution:[3080,800]})constlayer=scene.layer()constrobot=newSprite('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)文档齐全：中文|EN各种实例详尽的API文档原创博文SpriteJS--Canvas动画从未如此简单SpriteJS贡献代码，您可以关注我们的GitHub仓库，您宝贵的star是对我们最大的鼓励和支持。如果你对SpriteJS有疑问，或者需要更详细的了解，可以加入SpriteJS官方QQ群：
