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.org
<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.qhres.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.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。