快照

每个layer有自己的context，如果我们的scene有多个layer，而且我们需要将scene当前绘制结果保存下来时，我们并不需要自己处理每个layer（尽管自己处理也是可以的，通过layer.canvas可以拿到layer的canvas对象）。

SpriteJS Next 提供了一个同步的接口snapshot()，我们可以给scene拍一个当前的“快照”，snapshot()返回一个canvas对象，这个canvas对象是当前所有layer输出内容的叠加。

  1. const {Scene, Sprite, Path} = spritejs;
  2. const container = document.getElementById('adaptive');
  3. const scene = new Scene({
  4.   container,
  5.   width: 1200,
  6.   height: 600,
  7. });
  8. const bglayer = scene.layer('bglayer');
  9. const fglayer = scene.layer('fglayer');
  11. (async function () {
  12.   function randomTriangle() {
  13.     const triangle = new Path();
  14.     const pos = [Math.random() * 1540, Math.random() * 600];
  15.     const d = 'M0,0L0,10L8.66, 5z';
  16.     triangle.attr({
  17.       d,
  18.       scale: 5,
  19.       pos,
  20.       fillColor: '#37c',
  21.       rotate: Math.random() * 360,
  22.     });
  23.     bglayer.append(triangle);
  24.   }
  26.   for(let i = 0; i < 100; i++) {
  27.     randomTriangle();
  28.   }
  30.   const birdsJsonUrl = 'https://s5.ssl.qhres.com/static/5f6911b7b91c88da.json';
  31.   const birdsRes = 'https://p.ssl.qhimg.com/d/inn/c886d09f/birds.png';
  33.   await scene.preload([birdsRes, birdsJsonUrl]);
  35.   const bird = new Sprite('bird1.png');
  37.   bird.attr({
  38.     anchor: [0.5, 0.5],
  39.     pos: [50, 200],
  40.     scale: 0.6,
  41.     offsetPath: 'M0,100C0,100,200,-100,500,100S700,-100,1000,100S1200,-100,1700,100S2200,-100,2700,100',
  42.   });
  43.   fglayer.append(bird);
  45.   bird.animate([
  46.     {texture: 'bird1.png'},
  47.     {texture: 'bird2.png'},
  48.     {texture: 'bird3.png'},
  49.     {texture: 'bird1.png'},
  50.   ], {
  51.     duration: 300,
  52.     iterations: Infinity,
  53.     direction: 'alternate',
  54.     easing: 'step-end',
  55.   });
  57.   bird.animate([
  58.     {offsetDistance: 0},
  59.     {offsetDistance: 1},
  60.   ], {
  61.     duration: 6000,
  62.     iterations: Infinity,
  63.   });
  65.   const snapshotBtn = document.getElementById('take-snapshot'),
  66.     snapshotList = document.getElementById('snapshot-list');
  68.   snapshotBtn.addEventListener('click', (evt) => {
  69.     const canvas = scene.snapshot();
  70.     const snapshot = new Image();
  71.     snapshot.src = canvas.toDataURL();
  72.     const listItem = document.createElement('li');
  73.     listItem.appendChild(snapshot);
  74.     snapshotList.appendChild(listItem);
  75.   });
  76. }());

离屏快照

调用Scene的snapshot方法时，如果传参{offscreen: true}，那么快照将返回一个OffscreenCanvas。