p5.js 缓冲区中的图像

Question

我正在尝试加载图像“image.png”并将其放入先前创建的 createGraphics() 缓冲区中。但是，当我在 draw() 中加载缓冲区时，图像不存在。我想知道是否可以将图像加载到缓冲区中，如果可以，如何加载？

var buffer;
var image;

function setup() {
    createCanvas(800, 800);
    image = loadImage("image.png");
    buffer = createGraphics(800, 800);
    buffer.background(255, 255, 0);
    buffer.image(image, 0, 0)
}

function draw() {
    image(buffer, 0, 0);
}

如有任何帮助，我们将不胜感激。

Answer 1

调用您的变量 image 是不好的，因为 p5.js 已经有一个 image() 函数（您正在使用）。
使用preload()加载图片。这可确保在您尝试将图像加载到 setup() 内的缓冲区之前实际加载该图像。有关详细信息，请参阅 here。

给出了一个工作示例here。它使用以下 p5 代码。

var buffer;
var img;

function preload() {
  img = loadImage("p5im.png");
}

function setup() {
  createCanvas(600, 600);
  
  buffer = createGraphics(400, 400);
  buffer.background(255, 255, 0);
  buffer.image(img, 0, 0)
}

function draw() {
  image(buffer, 0, 0);
}

p5.js 缓冲区中的图像

p5.js image in a buffer

buffer

p5.js