问如何用p5.js导入gif保存画布？

EN

function preload() {
  gif = createImg("GIFS/" + gifId + ".gif");
}
function setup(){
  drawingContext.drawImage(gif.elt, random(-300, 1600), random(-300, 1000), w, w);
}

// load and display an HTML <img /> element in p5.js' canvas
let imgElement;

function setup() {
  createCanvas(400, 400);
  imgElement = createImg(
    'https://p5js.org/assets/img/asterisk-01.png',
    'the p5 magenta asterisk'
  );
  // hide <img /> element
  imgElement.hide();
}

// render <img /> into p5.js canvas
function renderImg(anyImg, x, y, w, h){
  drawingContext.drawImage(anyImg.elt, x, y, w, h);
}

function draw(){
  let imgSize = random(24, 144);
  renderImg(imgElement, random(-144, width), random(-144, height), imgSize, imgSize);
}

function keyPressed(){
  if(key == 's' || key == 'S'){
    saveFrames("out", "png", 1, 15);
    console.log("saving frames -> test on a local webserver");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.0/p5.min.js"></script>

var frames = 0;
var p5Canvas;
function setup(){
  p5Canvas = createCanvas(600, 600);
  
  // Load the GIF, set custom frame render function 
  gifler('http://themadcreator.github.io/gifler/assets/gif/run.gif').frames(p5Canvas.elt, onDrawFrame);
  
}
function onDrawFrame(ctx, frame) {
  // Match width/height to remove distortion
  ctx.canvas.width  = ctx.canvas.offsetWidth;
  ctx.canvas.height = ctx.canvas.offsetHeight;

  // Determine how many pikachus will fit on screen
  var n = Math.floor((ctx.canvas.width)/150)
  for(var x = 0; x < n; x++) {
    // Draw a pikachu
    var left = x * 150;
    ctx.globalCompositeOperation = 'source-over';
    ctx.drawImage(frame.buffer, frame.x + left, frame.y, 150, 100);

    // Composite a color
    var hue = (frames * 10 + x * 50) % 360;
    ctx.globalCompositeOperation = 'source-atop';
    ctx.fillStyle = 'hsla(' + hue + ', 100%, 50%, 0.5)';
    ctx.fillRect(left, 0, 150, this.height);
  }
  frames++;
}

<script src="http://themadcreator.github.io/gifler/assets/gifler.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.0/p5.min.js"></script>

var gifFrames;
var offscreenCanvas;

function setup(){
  // make an offscreen canvas (of gif dimensions) to render the gif into
  offscreenCanvas = createElement('canvas');
  // hide offscreen canvas
  offscreenCanvas.hide();
  // main p5 canvas to use
  createCanvas(600, 600);
  
  // Load the GIF, set custom frame render function 
  gifler('http://themadcreator.github.io/gifler/assets/gif/run.gif').animate(offscreenCanvas.elt).then( function(result){
  // extract canvas element of each frame
  gifFrames = result._frames;
} );
  
}

function draw(){
  // if the gif frames are ready
  if(gifFrames){
    // pick a frame
    let gifFrame = gifFrames[frameCount % gifFrames.length];
    // if the canvas of the frame is ready to be accessed
    if(gifFrame.buffer){
      // render the frame at random positions and sizes
      let randomSize = random(32, 192);
      drawingContext.drawImage(gifFrame.buffer, random(-192, width), random(-192, height), randomSize, randomSize);
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.0/p5.min.js"></script>
<script src="http://themadcreator.github.io/gifler/assets/gifler.js"></script>

let randomLocations = [];
let gif;

function preload(){
  gif = loadImage("http://themadcreator.github.io/gifler/assets/gif/run.gif");
}

function setup(){
  createCanvas(600, 600);
  mousePressed();
}

function mousePressed(){
  randomLocations.push(createVector(random(width), random(height)));
}

function draw(){
  background(255);
  for(let i = 0 ; i < randomLocations.length; i++){
    let loc = randomLocations[i];
    image(gif, loc.x, loc.y, 64, 64);
  } 
  text("click to add new random position", 10, 15);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.0/p5.min.js"></script>