image - 如何将 p5.js Canvas 保存为非常大的 PNG？

Question

我知道如何使用 p5.js 保存 Canvas 。但是我想将 Canvas 保存为一个非常大的 png(例如 8000x8000)，以便我可以在 Photoshop 中使用它并将图像缩小到适当的大小。除了在幕后创建一个对于浏览器窗口来说太大的新 Canvas 之外，还有其他简单的方法吗？

Answer 1

您可以使用 createGraphics()函数来创建一个离屏缓冲区。然后您可以使用 image() 将其绘制到屏幕上函数，或者你可以调用它的 save()函数将其存储为文件。下面是一个例子:

let pg;

function setup() {
  createCanvas(400, 400);
  pg = createGraphics(4000, 4000);
  pg.background(32);
}

function draw() {
  pg.ellipse(random(pg.width), random(pg.height), 100, 100);
  image(pg, 0, 0, width, height);
}

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