examples/doc_snapshot.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/js/spritejs.js"></script>
<script src="//lib.baomitu.com/dat-gui/0.7.2/dat.gui.min.js"></script>
<style>
#adaptive {
width: 100%;
padding-bottom: 50%;
background: #eee;
}
#take-snapshot {
margin-bottom: 6px;
}
</style>
</head>
<body>
<div><button id="take-snapshot">存快照</button></div>
<div id="adaptive"></div>
<div id="snapshot-list"></div>
<script>
const {Scene, Sprite, Path} = spritejs;
const container = document.getElementById('adaptive');
const scene = new Scene({
container,
width: 1200,
height: 600,
});
const bglayer = scene.layer('bglayer');
const fglayer = scene.layer('fglayer');
(async function () {
function randomTriangle() {
const triangle = new Path();
const pos = [Math.random() * 1540, Math.random() * 600];
const d = 'M0,0L0,10L8.66, 5z';
triangle.attr({
d,
scale: 5,
pos,
fillColor: '#37c',
rotate: Math.random() * 360,
});
bglayer.append(triangle);
}
for(let i = 0; i < 100; i++) {
randomTriangle();
}
const birdsJsonUrl = 'https://s5.ssl.qhres2.com/static/5f6911b7b91c88da.json';
const birdsRes = 'https://p.ssl.qhimg.com/d/inn/c886d09f/birds.png';
await scene.preload([birdsRes, birdsJsonUrl]);
const bird = new Sprite('bird1.png');
bird.attr({
anchor: [0.5, 0.5],
pos: [50, 200],
scale: 0.6,
offsetPath: 'M0,100C0,100,200,-100,500,100S700,-100,1000,100S1200,-100,1700,100S2200,-100,2700,100',
});
fglayer.append(bird);
bird.animate([
{texture: 'bird1.png'},
{texture: 'bird2.png'},
{texture: 'bird3.png'},
{texture: 'bird1.png'},
], {
duration: 300,
iterations: Infinity,
direction: 'alternate',
easing: 'step-end',
});
bird.animate([
{offsetDistance: 0},
{offsetDistance: 1},
], {
duration: 6000,
iterations: Infinity,
});
const snapshotBtn = document.getElementById('take-snapshot'),
snapshotList = document.getElementById('snapshot-list');
snapshotBtn.addEventListener('click', async (evt) => {
const canvas = await scene.snapshot();
const snapshot = new Image();
snapshot.src = canvas.toDataURL();
const listItem = document.createElement('li');
listItem.appendChild(snapshot);
snapshotList.appendChild(listItem);
});
}());
</script>
</body>
</html>