SpriteJS 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
SpriteJS 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
SpriteJS 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
SpriteJS 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
SpriteJS 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

SpriteJS 是一款由 360 奇舞团开源的跨终端 canvas 绘图库,可以基于 canvas 快速绘制结构化 UI 、动画和交互效果,并发布到任何拥有 canvas 环境的平台上(比如浏览器、小程序和 node )。


我们知道,Canvas Api 可以很灵活地绘制各种矢量图形到画布上,但是 Canvas Api 本身比较低级,比如我们要在画布中央绘制一个带有圆角的红色矩形,使用 Canvas 原生的 Api ,需要这样:


如果实现相同的效果,使用 SpriteJS 是这样写:


Sprite 为图形创建类似于 DOM 的对象模型,因此我们可以像创建 DOM 元素一样,创建 Sprite 元素,并将它们 append 到 layer 上,从而将元素呈现到画布上。

功能特性:

  • 基于 canvas 绘制的文档对象模型

  • 四种基本精灵类型:Sprite、Path、Label、Group

  • 支持基础和高级的精灵属性,精灵盒模型、属性与 CSS3 具有高度一致性。

  • 简便而强大的 Transition、Animation API

  • 支持雪碧图和资源预加载

  • 可扩展的事件机制

  • 高性能的缓存策略

  • 对 D3、Matter-js、Proton和 其他第三方库友好

  • 跨平台,支持 node-canvas 、微信小程序

文档结构

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (4)

加载中
👍
2019/05/09 11:24
回复
举报
用来做游戏可以吗
2018/06/27 21:25
回复
举报
打分: 力荐
看到奇舞团上推了,很棒。
2018/06/20 12:17
回复
举报
welefen软件作者
打分: 力荐
非常棒
2018/06/20 11:21
回复
举报
更多评论
暂无内容
发表了博客
2020/07/02 13:52

我对前端技术更新的看法以及未来发展趋势预测

前端开发如何看待“别更新了,学不动了”?Deno、TypeScript 等新轮子层出不穷,未来前端重点方向在哪?前端开发在大前端浪潮下如何持续学习、成长? SpriteJS 3.0 的特性和规划 SpriteJS 是由 360 奇舞团开源的跨平台高性能图形系统,它能够支持 web、node、桌面应用和小程序的图形绘制和实现各种动画效果,不久前刚发布了 3.0 版本。与 SpriteJS 2.0 相比,SpriteJS 3.0 是真正优先使用 WebGL2 和 WebGL 进行渲染的跨平台图形...

0
0
发表于大前端专区
2019/01/19 21:34

染陌足迹——13届D2前端技术论坛

水文预警!!多图预警!! 前一天刚参加完 [See Conf 2019](https://github.com/answershuto/Blog/blob/master/blogs/%E6%9F%93%E9%99%8C%E8%B6%B3%E8%BF%B9%E2%80%94%E2%80%94SeeConf2019.MarkDown) 回来,又起了一个大早赶往下沙。对于住在城西的我来说,下沙需要从杭州的一端跑到另一端,实在是远。好在现在通了文一西路隧道,早上不堵车的情况下还是很顺利地到达了下沙。前一天迟到了,这次早起了一个小时,顺利赶上了开场环...

0
0
2020/01/19 23:07

今日技术文章推荐

给 「前端开发博客」 加星标,每天打卡学习 SpriteJS的3D渲染能力 Up, Up, Up!原创 来自:奇舞周刊 阅读:1308 喜欢:27 前端学习图谱与新奇趣玩之前端Q直播回顾原创 来自:前端Q 阅读:400 喜欢:7 【第1840期】标准微前端架构在蚂蚁的落地实践 来自:前端早读课 阅读:2316 喜欢:25 前端性能优化之自定义性能指标及上报方法详解 来自:前端大全 阅读:4268 喜欢:19 那些有意思的网站彩蛋! 来自:SegmentFault 阅读:856 喜...

0
0
2020/06/30 07:31

【推荐】来奇舞团吧,让自己过得快乐一点

你品,你细细品~~ 听说,你喜欢的小哥哥小姐姐男神女神奇舞团都有,不信,你来看看呀🙈🙈🙈 说正事!!! 真诚地邀请可爱的小伙伴们来奇舞团跟我们一起快乐地写代码,心动不如行动,我们在奇舞团等你😜😜😜 前端开发工程师(北京) 岗位要求 熟悉Web前端技术和标准(Javascript、HTML、CSS),熟悉页面布局常用解决方案,对表现与数据分离、Web语义化等有深刻理解。 熟练使用一个数据驱动视图的框架(React,Vue,Ang...

0
0
发表于大前端专区
2020/11/01 21:25

史上最全的技术手册整理总结,编程小白都从这篇文章迅速成为大牛

整理云端的开发,助你开发效率与认知起码提升十倍。 技术手册 Python初级手册 Python进阶手册 Python2手册 Python3手册 HTML手册 CSS手册 CSS3手册 HTML5手册 Boostrap4手册 Boostrap3手册 Boostrap手册 FontAwesome手册 GIT中文手册 Markdown手册 SVN手册 Eclipse手册 SAS手册 ANT手册 Tableau手册 PHP手册 PHP7手册 PHP编码规范 YII2.0手册 Hadoop手册 ApachePig手册 Kafka手册 Storm手册 Impala手册 Zookeeper手册 Linux手册...

0
0
发表于开发技能专区
2020/12/02 13:04

史上最全的技术手册整理总结,编程小白都从这篇文章迅速成为大牛

孙叫兽,前端全栈攻城狮,更多资源请关注微信公众号:电商程序员 整理云端的开发,助你开发效率与认知起码提升十倍。 技术手册 Python初级手册 Python进阶手册 Python2手册 Python3手册 HTML手册 CSS手册 CSS3手册 HTML5手册 Boostrap4手册 Boostrap3手册 Boostrap手册 FontAwesome手册 GIT中文手册 Markdown手册 SVN手册 Eclipse手册 SAS手册 ANT手册 Tableau手册 PHP手册 PHP7手册 PHP编码规范 YII2.0手册 Hadoop手册 Apache...

0
0
发表于开发技能专区
2020/08/29 23:11

2018 年度国产开源软件新秀榜单

来源于开源中国整理分享 开源中国社区在 2018 年新收录了近 2000 款开源软件,种类林林总总。根据开源软件的关注度和活跃度,以及它们在功能上的独特构思,最终产生了这份 2018 年度国产开源软件新秀榜。现在,让我们一同从这些开源软件中,回顾去年的国产开源软件新秀 TOP 30。 区别于之前的常规年度榜单,「国产新秀榜」是新设立的一个年度排行榜,旨在让更多优秀但知名度稍低的开源软件能被广大开发者熟知。而所谓新秀,不仅...

0
0
发表了博客
2018/07/02 18:05

2018年6月

ng从构建分布式秒杀系统聊聊Lock锁使用中的坑 https://www.cnblogs.com/smallSevens/p/9114734.html https://gitee.com/52itstyle/spring-boot-seckill 从零开始搭建ELK+GPE监控预警系统 https://www.cnblogs.com/smallSevens/p/7860461.html 搭建: canal部署与实例运行 https://blog.csdn.net/hackerwin7/article/details/37923607 https://github.com/alibaba/canal TiDB 快速入门指南 https://pingcap.com/docs-cn/QUICKSTA...

0
0
发表于程序人生专区
02/04 08:45

5 大实战项目,月影带你掌握前端可视化

最近天冷了,疫情也是反反复复,几个城市都出现了确诊病例,感觉又回到了之前每天看信息图的那会儿。 来源:北京大学可视化与可视分析实验室 这种信息图跟普通的网页差别很大,无法用传统 Web 开发技术实现,叫作数据可视化。作为前端领域中一个几乎不用写网页的特殊分支,可视化利用计算机的图形学和图像处理技术,将数据转换成图形或图像,在屏幕上显示出来,并进行交互处理。 它可以实现很多传统 Web 网页无法实现的效果,应...

0
0
发表于网络技术专区
02/07 08:30

5 大实战项目,月影带你掌握前端可视化

最近天冷了,疫情也是反反复复,几个城市都出现了确诊病例,感觉又回到了之前每天看信息图的那会儿。 来源:北京大学可视化与可视分析实验室 这种信息图跟普通的网页差别很大,无法用传统 Web 开发技术实现,叫作数据可视化。作为前端领域中一个几乎不用写网页的特殊分支,可视化利用计算机的图形学和图像处理技术,将数据转换成图形或图像,在屏幕上显示出来,并进行交互处理。 它可以实现很多传统 Web 网页无法实现的效果,应...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
4 评论
102 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部