如何将P5.js动画导出为GIF或MP4格式？运行时画布空白如何解决？

空白屏问题修复 #

你的代码存在两个基础错误导致无法正常渲染：

• 未声明Spacing变量，运行时会抛出未定义异常直接中断执行
• createCanvas()被放在draw()函数中重复执行，正确写法是放在setup()中仅初始化一次

修复后可正常运行的代码如下：

var Offset = 100;
var minSize = 1;
var maxSize = 60;
var colors = ["#D2B634", "#E43D3B", "#BB0ACF", "#7B2C0C"];
var rectSize = 10;
let angle = 0;
var Spacing = 40; // 补充缺失的Spacing变量，可按需调整数值

function setup() {
  createCanvas(500, 500); // canvas初始化移到setup中仅执行一次
  frameRate(4);
  rectMode(CENTER); // 固定渲染配置移到setup减少重复执行
}

function draw() {
  background("#62AEA7");
  noStroke();

  var circleCountx = (500 - 100) / Spacing;
  var circleCounty = (500 - 100) / Spacing;

  for (let c = 0; c < 10; c++) {
    for (let i = 0; i < circleCountx; i++) {
      for (let j = 0; j < circleCounty; j++) {
        let colorpicker = int(random(colors.length));
        fill(colors[colorpicker]);
        let size = random(minSize, maxSize);

        ellipse(Offset + Spacing * i, Offset + Spacing * j, size, size);

        rect(
          Offset + Spacing * i,
          Offset + Spacing * j,
          size - rectSize,
          size - rectSize
        );
      }
    }
  }
}

P5.js动画导出方案 #

导出GIF #

• 可以使用p5.js官方的createGIF扩展，直接在代码中配置导出参数：初始化时设置帧率、总导出帧数，在draw函数每帧渲染完成后调用addFrame()，所有帧处理完毕后会自动触发GIF文件下载。
• 不想修改代码的话，可以直接用浏览器自带的录屏功能录制画布区域，录制完成后转成GIF格式即可。

导出MP4 #

• 调用浏览器原生MediaRecorder API，将canvas的输出流传入录制器，录制完成后先导出为webm格式，再自行转码为MP4即可。
• 也可以直接用系统或浏览器的录屏工具录制画布区域，导出后按需剪辑生成MP4文件。

内容的提问来源于stack exchange，提问作者Gamma1