我一直在尝试使用CCapture库将p5.js草图保存为.gif或视频格式的方法，到目前为止，我设法使用下面的代码来实现此目的，但是问题是最终结果不符合“ drawGrid（）”对象的动画变得跳动且令人讨厌。任何线索将不胜感激。
let gifLength = 180;
let canvas;
var spacingX = 50;
var spacingY = 50;
var myAngle = 0.0;
function setup() {
var p5Canvas = createCanvas(windowWidth, windowHeight, WEBGL);
canvas = p5Canvas.canvas;
centerX = windowWidth / 2;
centerY = windowHeight / 3;
background(0);
}
function draw() {
capturer.start(); //Try erasing this to see how the animation should actually behave! :(
background(0);
rotateX(1.45);
push();
translate(-600, millis() / 11 % 100);
console.log(millis());
drawGrid();
pop();
push();
ambientLight(255, 0, 255);
ambientMaterial(255, 0, 255);
translate(0, 200, 160);
myAngle = myAngle + 0.01;
rotateZ(myAngle);
drawPyramid();
pop();
//This part counts the frames then stops and saves the capture
if (frameCount < gifLength) {
capturer.capture(canvas);
} else if (frameCount == gifLength) {
capturer.stop();
capturer.save();
}
}
// this creates a pyramid shape by defining
// vertex points in 3D space (x, y, z)
function drawPyramid() {
stroke(139, 0, 139);
beginShape();
// triangle 1
fill(50, 55, 100);
vertex(-100, -100, -100);
vertex(100, -100, -100);
vertex(0, 0, 100);
endShape(CLOSE);
beginShape();
// triangle 2
fill(50, 55, 100);
vertex(100, -100, -100);
vertex(100, 100, -100);
vertex(0, 0, 100);
endShape(CLOSE);
beginShape();
// triangle 3
fill(50, 55, 100);
vertex(100, 100, -100);
vertex(-100, 100, -100);
vertex(0, 0, 100);
endShape(CLOSE);
beginShape();
// triangle 4
fill(50, 55, 100);
vertex(-100, 100, -100);
vertex(-100, -100, -100);
vertex(0, 0, 100);
endShape(CLOSE);
beginShape();
// pyramid base
fill(50, 55, 100);
vertex(-100, -100, -100);
vertex(100, -100, -100);
vertex(100, 100, -100);
vertex(-100, 100, -100);
endShape(CLOSE);
}
function drawGrid() {
fill(139, 0, 139);
stroke(139, 0, 139);
for (var y = -100; y < windowHeight + 100; y = y + spacingY) {
line(-600, y, windowWidth + 100, y);
}
for (var x = -600; x < windowWidth + 100; x = x + spacingX) {
line(x, -100, x, windowHeight + 200);
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://github.com/spite/ccapture.js/blob/master/src/gif.worker.js"></script>
<script src="https://github.com/spite/ccapture.js/blob/master/build/CCapture.all.min.js"></script>
<script src="https://github.com/processing/p5.js/releases/download/1.0.0/p5.min.js"></script>
<script>
var capturer = new CCapture({
framerate: 60,
format: 'gif',
workersPath: './js/',
verbose: true
});
</script>
<style>
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<style>
</body></html>我有一个非常相似的问题，但问题更严重。我有一个p5.js草图，它使用p5.sound.js做一些动画，但是当我调用capturer.start（）函数时，我的画布卡在了调用capturer.start（）之前的最后一帧上。
我已经在ccapture.js的github讨论中阅读了它可能不适用于p5.js低于0.9的版本，但是切换到旧版本并不能解决问题。
我还尝试在仅在动画开始后的if条件内将capturer.start（）移至setup（），draw（），draw（）内。没有任何效果，它只显示调用start之前的最后一件事。