Question

我使用 Atom编辑器。我想用画布制作 20秒GIF 。 saveFrames()有一个限制（我想）。即使输入saveFrames("aa","png",15,22);

，它也可以将.png文件保存为短gif（3-5秒）。

我发现了CCapture.js，但是找不到导出画布的任何代码示例。

它不必导出为GIF；但我至少要保存.png的快照我在画布上的动画是无限的。我该怎么办？

我在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);
}

Answer 1

我一直在研究支持GIF导出的新库p5.createLoop。

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


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

下面是完整示例的codePen。大约需要两分钟，超过50MB，完全值得

Answer 2

经过一整天的研究，令人惊讶的是，我发现两周前在youtube上上传了一个视频： CCapture Video

不要忘记CCapture导出（gif size = canvas sizex2）。

在P5JS中将画布导出为GIF / PNG

2 个答案: