p5.js | 保存()函数

p5.js是一个为创意编码而生的JavaScript库，可以用于创作交互式图形、动画和音频应用程序。其中，保存()函数是p5.js中一个非常有用的函数，可以用来将p5.js画布中的内容保存为图片。

语法

保存()函数的语法如下所示：

save([nom], obj)

参数说明：

• nom：可选，用于指定保存图像的文件名，如果不指定，则默认为“下载.png”。
• obj：可选，表示要保存的图像对象，如果不指定，则表示保存当前p5.js画布中的内容。

用法示例

以下示例演示了如何使用保存()函数保存当前p5.js画布中的内容，并指定文件名为“mySketch.png”：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  fill(255, 0, 0);
  ellipse(mouseX, mouseY, 50, 50);
}

function mousePressed() {
  save("mySketch.png");
}

在这个示例中，我们创建了一个400x400的画布，并在画布中绘制一个红色的圆形。当鼠标点击画布时，我们调用了保存()函数，并将文件名设置为“mySketch.png”。

注意事项

• 保存()函数只能在用户与页面的交互中调用。这意味着，你不能在p5.js程序的setup()函数中调用保存()函数，否则会出现错误。
• 由于Web安全策略的限制，保存()函数只能在https协议下使用，或者在本地开发时使用。
• 在某些浏览器中，保存()函数可能会受到一些限制，比如无法保存透明的PNG图片等。所以最好在多个浏览器中进行测试。

结论

保存()函数是p5.js中一个非常有用的函数，可以用来保存当前p5.js画布中的内容。在使用该函数时，需要注意安全策略和兼容性问题。