SpriteJS：重新定义Canvas API
极客时间编辑部
讲述：杜力大小：1.16M时长：02:32
近日，360 奇舞团开源了跨终端 Canvas 绘图库 SpriteJS，InfoQ 对奇舞团负责人月影以及两名奇舞团成员进行了采访，了解了 SpriteJS 背后的一些故事。
SpriteJS 是一款开源的跨终端 Canvas 绘图框架，可以基于 Canvas 快速绘制结构化 UI、动画和交互效果，并发布到任何拥有 Canvas 环境的平台上（比如浏览器、小程序和 node ）。
如果开发者想要在 Canvas 上实现一个简单的动画，现有的开源项目并不能很好的满足，因此，SpriteJS 被开发出来。
要使用 Canvas 做数据可视化渲染，有以下几种选择：
一是直接使用原生的 Canvas API，但是因为 Canvas 原生接口比较底层，使用上不是很方便，直接使用的话开发效率不是很高。
二是可以选择一些游戏引擎，游戏引擎为游戏中复杂的视觉效果而生，开发者可以使用它实现绝大多数的效果，但缺点是太重，文件尺寸太大，而且也有使用门槛。
三是 EaselJS、Pixi、KonvaJS 这类图形库，它们不是体量太大，就是 API 太复杂。另外，这些图形库大部分或多或少依赖于 DOM API，因此在跨平台移植上的表现不是很好。
SpriteJS 通过将 Canvas 的 API 封装成类似 DOM 模型的 API，并支持事件分发，让前端开发者能够轻松上手。另外，SpriteJS 内置了缓存策略，避免无用的图像重绘，有些时候性能甚至比直接使用原生 Canvas API 更高。
月影表示，SpriteJS 的 API 是支持 Web 标准，并以遵循 Web 习惯为前提而定义的，这让前端实现动画的门槛大大降低。
据介绍，SpriteJS 的目标不仅是制作简单的动画，而是成为 Canvas 中的 Three.JS。为了达到这个目标，SpriteJS 一方面通过彻底的组件化，抽离出 Sprite-core 来实现跨平台，对多个平台的 Canvas 环境都做了兼容；另一方面适配了多个图形库和物理引擎。
目前，SpriteJS 的目标还包括可视化和小游戏领域。在可视化方面，它正在适配 D3 方面做更多的工作，包括定制一些 D3 扩展库，比如为图表添加坐标轴等。至于小游戏方面，月影表示，SpriteJS 正在考虑做一个可视化开发动画和游戏的在线工具。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
该免费文章来自《极客视点》，如需阅读全部文章，
请先领取课程
请先领取课程
免费领取
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。
收起评论