SpriteJS is a cross-platform lightweight 2D render object model.
Manipulate the sprites in canvas as you do with the DOM elements.
- Manipulate the sprites element as you do with the DOM elements.
- Perform fast drawing with smart cache.
- Multiple layers.
- Web Animations Api
- Controllable event dispatching.
- Object Oriented Programmed Development with ES6+
- Server-side render. Work with node-canvas.
- 微信小程序
<script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
<div id="container"></div>
<script>
const imgUrl = 'https://s5.ssl.qhres.com/static/ec9f373a383d7664.svg'
const {Scene, Sprite} = spritejs;
const paper = new Scene('#container', 400, 400)
const sprite = new Sprite(imgUrl)
sprite.attr({
bgcolor: '#fff',
pos: [0, 0],
size: [400, 400],
borderRadius: '200'
})
paper.layer().appendChild(sprite)
</script>
In browser:
<script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
With NPM:
npm install spritejs --save
- Overview
- Sprites
- Path & Group
- Labels
- Buttons
- Transforms
- Events
- Filters
- Animations
- SVG Paths
- Offset API
- OBB Hit
Compatible with d3.js.
Proton is a lightweight and powerful javascript particle engine.
Matter.js is a JavaScript 2D rigid body physics engine.
Build with NPM
npm run build
Build Doc
npm run build-doc
npm test
31 passed
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Lines |
---|---|---|---|---|---|
All files | 97.7 | 86.73 | 95.24 | 97.8 | |
src | 97.28 | 86.13 | 92.31 | 97.39 | |
index.js | 100 | 50 | 100 | 100 | 24 |
layer.js | 96.04 | 83.33 | 100 | 95.92 | 28,42,53,55 |
resource.js | 97.73 | 80 | 85.71 | 97.56 | 28 |
scene.js | 97.98 | 89.7 | 90.91 | 98.31 | 219,222,267,300 |
sprite.js | 94.12 | 76.19 | 100 | 93.75 | 28,55 |
src/platform | 100 | 91.43 | 100 | 100 | |
index.js | 100 | 91.43 | 100 | 100 | 68,82,139 |
Spritejs (>= 1.15.0) can render sprites' canvas on server-side. Depend on node-canvas.
sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev librsvg2-dev libgif-dev build-essential g++
npm install canvas@next
const fs = require('fs')
const {Scene, Label} = require('spritejs')
const scene = new Scene('#test', 800, 600)
const bglayer = scene.layer('bg', {handleEvent: false})
const text = new Label('Hello Sprite!')
text.attr({
anchor: [0.5, 0.5],
pos: [400, 300],
font: '46px Arial',
color: 'blue',
bgcolor: 'white',
textAlign: 'center',
})
bglayer.append(text)
;(async function () {
const canvas = await scene.snapshot()
fs.writeFileSync('snap.png', canvas.toBuffer())
}())