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://s4.ssl.qhres.com/!28dd6ee0/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>
Learn more at spritejs.org
In browser:
<script src="https://s4.ssl.qhres.com/!28dd6ee0/spritejs.min.js"></script>
- Overview
- Sprites
- Textures
- Labels
- Buttons
- Transforms
- Events
- Filters
- Animations
- SVG Paths
- Offset API
- OBB Hit
Compatible with d3.js.
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())
}())