[开源] SpriteJS -- 一款简单的跨终端 canvas 绘图框架

Achilles 发布于2019-08-22 18:08 / 2143人阅读

摘要：是一款由奇舞团开源的跨终端绘图框架，可以基于快速绘制结构化动画和交互效果，并发布到任何拥有环境的平台上比如浏览器小程序和。有如下特点基于绘制的文档对象模型四种基本精灵类型支持基础和高级的精灵属性，精灵盒模型属性与具有高度一致性。

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

官方网站：http://spritejs.org

Github地址：https://github.com/spritejs/s...

DEMO示例：http://spritejs.org/demo/

为什么要开发 SpriteJS

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

const canvas = document.getElementById("paper")
const context = 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 是这样写：

const scene = new spritejs.Scene("#container")
const layer = scene.layer()

const s = new spritejs.Sprite({
  anchor: 0.5,
  bgcolor: "red",
  pos: [300, 300],
  size: [200, 200],
  borderRadius: 50,
})

layer.append(s)

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

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

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

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

简便而强大的 Transition、Animation API

支持雪碧图和资源预加载

可扩展的事件机制

高性能的缓存策略

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

跨平台，支持服务端渲染、微信小程序

基本使用介绍

通过 NPM 或者直接加载 CDN 版本即可使用 SpriteJS

npm install spritejs —save

注：在服务端使用需要安装 node-canvas

下面是简单的用法示例，大家也可以直接访问 JSBin 查看效果。

const {Scene, Sprite} = spritejs

const scene = new Scene("#demo-quickStart", {viewport: [770, 200], resolution: [3080, 800]})

const layer = scene.layer()

const robot = new Sprite("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 或者希望给 SpriteJS 贡献代码，可以关注我们的 GitHub仓库，大家的宝贵 star 是对我们最大的鼓励和支持。如果对 SpriteJS 有疑问，或者需要了解进一步细节，可以加入 SpriteJS 官方QQ群：

专线服务混合云服务器控制终端框架简单爬虫框架简单 php框架云终端服务器开源

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95547.html

[开源] SpriteJS -- 一款简单的跨终端 canvas 绘图框架

摘要：是一款由奇舞团开源的跨终端绘图框架，可以基于快速绘制结构化动画和交互效果，并发布到任何拥有环境的平台上比如浏览器小程序和。有如下特点基于绘制的文档对象模型四种基本精灵类型支持基础和高级的精灵属性，精灵盒模型属性与具有高度一致性。 SpriteJS 是一款由360奇舞团开源的跨终端 canvas 绘图框架，可以基于 canvas 快速绘制结构化 UI、动画和交互效果，并发布到任何拥有ca...

hover_lew 2019-08-30 15:53 评论0 收藏0
GitHub 值得收藏的前端项目[每月更新...]

摘要：也是一款优秀的响应式框架站点所使用的一套框架为微信服务量身设计的一套框架一组很小的，响应式的组件，你可以在网页的项目上到处使用一个可定制的文件，使浏览器呈现的所有元素，更一致和符合现代标准。 GitHub 值得收藏的前端项目整理与收集的一些比较优秀github项目，方便自己阅读，顺便分享出来，大家一起学习，本篇文章会持续更新，版权归原作者所有。欢迎github star与fork 预...

maxmin 2019-08-29 16:07 评论0 收藏0
2016年前端开发学习计划

摘要：年，软件开发界发生了很多变化。六数据存储是一个关系型数据库管理系统，由瑞典公司开发，目前属于旗下公司。最流行的关系型数据库管理系统，在应用方面是最好的，关系数据库管理系统应用软件之一。七是最新的修订版本，年月由万维网联盟完成标准制定。 2015年，软件开发界发生了很多变化。有很多流行的新语言发布了，也有很多重要的框架和工具发布了新版本。下面有一个我们觉得最重要的简短清单，同时也有我们觉...

asoren 2019-08-19 18:37 评论0 收藏0
2016年前端开发学习计划

摘要：年，软件开发界发生了很多变化。六数据存储是一个关系型数据库管理系统，由瑞典公司开发，目前属于旗下公司。最流行的关系型数据库管理系统，在应用方面是最好的，关系数据库管理系统应用软件之一。七是最新的修订版本，年月由万维网联盟完成标准制定。 2015年，软件开发界发生了很多变化。有很多流行的新语言发布了，也有很多重要的框架和工具发布了新版本。下面有一个我们觉得最重要的简短清单，同时也有我们觉...

Null 2019-06-26 17:04 评论0 收藏0