Question

缓冲区中的 p5.js 图像

2020-10-13

1209

buffer p5.js

我试图加载图像“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() 内的缓冲区中加载图像之前，图像已实际加载。有关更多信息，请参阅此处。

在此处提供了一个工作示例。它使用以下 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);
}