A cross platform high-performance graphics system.
MIT License
spritejs.com
Spritejs is a cross platform high-performance graphics system, which can render graphics on web, node, desktop applications and mini-programs.
SpritejsNext is the new version of spritejs. It is renderer agnostic enabling the same api to render in multiple contexts: webgl2, webgl, and canvas2d.
Manipulate the sprites in canvas as you do with the DOM elements.
SpriteJS - spritejs.com
<script src="https://unpkg.com/spritejs@3/dist/spritejs.min.js"></script>
<div id="container" style="width:400px;height:400px"></div>
<script>
const imgUrl = 'https://s5.ssl.qhres2.com/static/ec9f373a383d7664.svg'
const {Scene, Sprite} = spritejs;
const container = document.getElementById('container');
const paper = new Scene({
container,
width: 400,
height: 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@3/dist/spritejs.min.js"></script>
With Node.js:
npm install spritejs --save
import * as spritejs from 'spritejs';
SpriteJSNext can render 3D elements through 3D extension library.
<script src="https://unpkg.com/spritejs@3/dist/spritejs.es.min.js"></script>
<script src="https://unpkg.com/sprite-extend-3d/dist/sprite-extend-3d.js"></script>
Or from NPM
import {Scene} from 'spritejs';
import {Cube, shaders} from 'sprite-extend-3d';
Compatible with d3.js.
A visulization library based on spritejs.
Project | Description |
---|---|
sprite-vue | SpriteJS for Vue.js. |
sprite-react | Rendering spritejs elements with React. |
q-charts | A visulization library based on spritejs |
cat-charts-vue | A visulization library based on spritejs , qcharts and Vue. |
SpritejsNext provides several kinds of basic sprite elements, which can be operated on the layer like DOM elements.
Build with NPM
npm run build
Build Doc
npm run build-doc
npm test
Compatible for most modern browsers.
You should import babel-polyfill for early browers(i.e. iOS 8).
Thanks goes to these wonderful people (emoji key):
betseyliu💻 📖 | Shero0311📖 | 有马📖 💻 | 文蔺💻 🐛 | 蔡斯杰💻 📖 | Shaofei Cheng💻 📖 | 摇太阳📖 |
公子💻 | justemit💻 📖 🐛 | Welefen Lee💻 | YUPENG12138📖 | xinde🐛 | ggvswild🐛 | liulinboyi💻 |
Lulzx💻 | asidar💻 | alphatr💻 | W-Qing📖 |
svg-path-contours Approximates an SVG path into a discrete list of 2D contours (polylines).
extrude-polyline Extrudes a 2D polyline with a given line thickness and the desired join/cap types.
triangulate-contours Triangulates a series of contours using Tess2.js.
OGL OGL is a small, effective WebGL library aimed at developers who like minimal layers of abstraction, and are comfortable creating their own shaders.