spriteJs-跨终端 canvas 绘图框架

spriteJs 初尝试

简介
spriteJs 是一款由 360 奇舞团开源的跨终端 canvas 绘图框架，可以基于 canvas 快速绘制结构化 UI、动画和交互效果，是跨平台的2D绘图对象模型库，它能够支持web、node、桌面应用和微信小程序的图形绘制和实现各种动画效果。

canvas本身的api不就挺好用的吗，为什么要用 spriteJs 呢？后来做了下对比，有兴趣的小伙伴可以看一下这里：https://www.v2ex.com/t/464279 把为什么使用它介绍的挺详细的

官方文档：http://spritejs.org/#/zh-cn/index
github：https://github.com/spritejs/spritejs

特性(来自官方文档)
可以像操作dom一样操作画布上的图形元素(前端小伙伴的福音啊)
通过智能缓存大大提升渲染性能
支持多图层处理图形、文本、图像渲染
支持DOM事件代理、自定义事件派发
使用ES6+语法和面向对象编程
结构化对象树，对d3引擎友好，能够无缝使用
支持服务端渲染
支持微信小程序
支持Vue
支持React
废话不多说，下面就用 spriteJs 来做一个简单的动画demo，先奉上效果，我称其为"机器人下蛋"（机器人来之 spriteJs 官方）：

spriteJs canvas

demo
demo效果：https://liuxiaochaogit.github.io/demo/spriteJs/index.html
源码：https://github.com/liuxiaochaoGit/demo/tree/master/spriteJs

安装 spriteJs，因为是demo，我这直接引入的CDN：

 <script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>

首先我们引入场景 Scene，利用它来管理Layer，派发事件，实现屏幕适配，具体的文档可以看这里，很详细：http://spritejs.org/#/zh-cn/doc/scene

 const {
    
    Scene} = spritejs;
 //  container 是容器
 const scene = new Scene('#container')

然后引入Sprite，你可以将其理解为一个最基础的dom元素，有四种类型：分别是Sprite、Label、Path和Group，不多介绍，可以直接怼文档：http://spritejs.org/#/zh-cn/doc/sprite

 const {
    
    Scene, Sprite} = spritejs;
 // 创建layer对象，一个layer对应一个canvas
 const layer = scene.layer();
 // 引入图片，可以是相对路径，也可以是绝对路径，也可以是cdn
 const bg = new Sprite('./img/bg.png');
 // 初始化设置
 bg.attr({
    
    
     anchor: [0, 0],
     x: 0,
     y: 0,
     // size: [1000, 600]
 });
 // 将图片添加到layer(canvas)
 layer.append(bg);

是不是很熟悉的api，像attr，append这些跟jquery里面的方法很像，这不就是jquery么？
现在一个简单的背景图片已经被添加到layer（canvas）上了

spriteJs-跨终端 canvas 绘图框架

猜你喜欢