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

为什么要开发 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()

const scene = new spritejs.Scene('#container')const   = scene. ()const s = new spritejs.Sprite({  anchor: 0.5,  bgcolor: 'red',  pos: [300, 300],  size: [200, 200],  borderRadius: 50,}) .append(s)

npm install spritejs —save

<  src="//lib.baomitu.com/spritejs/2.0.0-alpha.28/spritejs.min.js"></ >

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

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

const {Scene, Sprite} = spritejsconst scene = new Scene('#demo-quickStart', {viewport: [770, 200], resolution: [3080, 800]})const   = scene. ()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',}) .append(robot)