代码拉取完成,页面将自动刷新
同步操作将从 奇虎360/spriteJS 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
SpriteJS is a cross-platform lightweight 2D render object model.
Manipulate the sprites in canvas as you do with the DOM elements.
<script src="https://s4.ssl.qhres.com/!f6567578/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://s4.ssl.qhres.com/!f6567578/spritejs.min.js"></script>
With NPM:
npm install spritejs --save
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())
}())
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。