时间戳

首页 > 解决方案 > 缓冲区中的 p5.js 图像

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);
}

任何帮助将不胜感激。

标签： bufferp5.js

解决方案

  1. 调用你的变量是不好的，image因为 p5.js 已经有一个image()函数（你使用它）。

  2. 用于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);
}

推荐阅读