javascript - 在 p5js 中将 Canvas 导出为 GIF/PNG

Question

我用 原子编辑器 .我想做 20秒动图用我的 Canvas 。saveFrames()有一个限制(我猜)。即使我输入 saveFrames("aa","png",15,22);，它也可以将 .png 文件保存为短 gif(3-5 秒)
我发现了 CCapture.js，但找不到任何代码示例来导出 Canvas 。
它不必导出为 GIF；但我想至少保存 .png 的快照
我在 Canvas 上的动画无限。我该怎么做？
我在 p5.js 中的动画代码:

var x = 0;
var speed = 10;
var d1 = 100;
var d2 = 100;

function setup() {
  createCanvas(600, 400);
  background(0);
  //saveFrames("aa","png",15,22);
}

function draw() {
  stroke(random(100, 255), 0, random(100, 190));
  strokeWeight(1.5);
  ellipse(x, 100, d1, d1);
  x = x + speed;
  d1 = d1 - 0.6;
  
  if (x > width || x < 0) {
    speed = speed * -1;
    fill(speed * 51);
  }
  
  ellipse(x, 300, d1, d1);
  ellipse(x, 200, 50, 50);
}

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

Answer 1

我一直在开发一个支持 GIF 导出的新库，p5.createLoop .

这将运行草图，然后以相同的帧速率渲染 GIF。

function setup() {
  createCanvas(600, 400);
  background(0);
  frameRate(22)
  createLoop({duration:15,gif:true})
}

这是 codePen用完整的例子。大约需要两分钟，超过50MB，完全值得