p5.js | loadImage()函数

loadImage() 函数是 p5.js 中用于加载图像的功能函数。它允许程序员在程序运行时从外部文件中加载图像（如 PNG、JPG、GIF 等格式）。该函数返回一个 p5.Image 对象，该对象可以用于在画布中显示图像。

语法

loadImage(path, [successCallback], [failureCallback]), [onProgressCallback]

参数：

• path：要加载的图像文件的路径
• successCallback：在图像成功加载后调用的回调函数（可选）
• failureCallback：在加载图像失败时调用的回调函数（可选）
• onProgressCallback：在图像加载过程中每秒调用一次以提供加载进度的百分比（可选）

示例

let img;

function preload() {
  img = loadImage('path/to/image.jpg');
}

function setup() {
  createCanvas(400, 400);
  image(img, 0, 0);
}

在上面的例子中，我们在 preload() 函数中加载了一张名为 image.jpg 的图像，然后在 setup() 函数中使用 image() 函数将其绘制在画布上。

回调函数

loadImage() 函数还允许您在图像加载完成或失败时调用回调函数。这些回调函数在加载图像时异步执行，因此您不必阻止程序的其余部分。您可以在回调函数中执行其他操作，例如调整图像的大小或透明度，或动态创建其他图像。

以下是一些示例。

成功回调函数

let img;

function preload() {
  img = loadImage('path/to/image.jpg', imageLoaded);
}

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

function imageLoaded() {
  // 图像成功加载后执行的代码
  image(img, 0, 0);
}

在上面的代码中，我们将 imageLoaded() 函数传递给 loadImage() 函数作为成功回调函数。一旦图像成功加载，该函数将被调用，并且我们可以在其中执行其他操作。

失败回调函数

let img;

function preload() {
  img = loadImage('path/to/nonexistent_image.jpg', imageLoadError);
}

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

function imageLoadError() {
  // 图像加载失败后执行的代码
  console.log('图像加载失败！');
}

在上面的代码中，我们将 imageLoadError() 函数传递给 loadImage() 函数作为失败回调函数。如果成功加载一个不存在的图像，该函数将被调用，并且我们可以在其中执行其他操作。

总结

loadImage() 函数是 p5.js 中非常有用的函数之一，它允许您在程序中加载外部图像并使用它们。我们可以使用成功或失败回调函数进一步控制图像的行为，并在图像加载时提供进度回调。开始使用吧！