如何使用p5.js和p5.js-svg正确生成并获取SVG dataURL

p5.js的实例初始化、setup()/draw()生命周期是异步调度的，new p5(sketch)执行时不会阻塞等待渲染流程全部跑完，因此你在实例化后立刻打印外部的unencodedDataURL时，draw函数内的赋值逻辑尚未执行，变量始终是空值。
另外你贴的示例代码存在语法错误：p.ellipse(z 行多了多余的字符z，运行前需要删除。

不要依赖全局变量在sketch外部等待赋值，最稳妥的方式是在draw函数末尾、确认所有图形绘制完成后，直接调用getDataURL()并执行后续存储逻辑，这也是p5.js-svg推荐的调用时机：

const canvasWidth = 600;
const canvasHeight = 600;
const bgColor = "#fffcf3";

// 后续处理SVG dataURL的逻辑单独封装
function handleSvgData(dataURL) {
  console.log('正确获取到的dataURL:', dataURL);
  // 在这里写你的存储逻辑，比如存本地、上传服务端等
}

const sketch = (p) => {
  p.setup = () => {
    p.createCanvas(canvasWidth, canvasHeight, p.SVG);
    p.background(bgColor);
    p.noLoop();
  }

  p.draw = () => {
    p.noFill();
    // 已删除多余的z参数
    p.ellipse(
      canvasWidth / 2,
      canvasHeight / 2,
      150,
      150
    );
    // 绘制完成后再取dataURL
    const svgDataURL = p.getDataURL();
    // 直接触发后续处理逻辑
    handleSvgData(svgDataURL);
  }
}

// 初始化p5实例即可，不需要在外部同步等待取值
const test = new p5(sketch, document.body);

如果必须在sketch作用域外获取值，只要在拿到dataURL后通过自定义回调向外传递即可，不要使用定时器轮询这类不可靠的方式。

注意：不要在setup()阶段或者new p5()之后同步调用getDataURL()，此时SVG渲染上下文还未完成绘制，拿到的内容会不完整。

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