p5.js | saveCanvas()函数

saveCanvas()函数是p5.js中用于保存canvas画布内容的函数，通过指定文件名和格式可以将canvas图像保存到本地电脑中。

语法

saveCanvas([filename], [extension])

参数

• filename：保存的文件名，如果不指定，则默认将文件命名为“canvas”。
• extension：保存的文件格式，如果不指定，则默认将文件格式设置为“png”。

示例

保存默认格式的canvas图像：

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

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

function mouseClicked() {
  saveCanvas();
}

保存为指定格式的canvas图像：

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

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

function mouseClicked() {
  saveCanvas('myCanvas', 'jpg');
}

注意事项

• saveCanvas()只能保存p5.js中的canvas图像，不能保存其他网页元素或外部图片。
• saveCanvas()函数必须在点击事件等回调函数内触发，否则可能会保存不完整的图像。
• saveCanvas()函数不能跨域保存，保存的文件必须在同一个域名下。
• 有些浏览器禁止下载文件，会导致saveCanvas()函数无法正常工作。