p5.js入门教程之图片加载

本教程将为大家介绍如何使用p5.js加载图片并在网页上显示。在开始本教程之前，建议您已经掌握了基本的HTML、CSS和JavaScript语言知识。

准备工作

在开始本教程之前，需要进行以下准备工作：

• 下载p5.js库并在HTML文档中引入
• 准备一张图片文件

加载图片

使用p5.js库中的loadImage()函数可以实现加载图片的功能。该函数需要传入两个参数，第一个参数表示图片的URL，第二个参数是一个回调函数，用于在图片加载完成后进行处理。

let img;
function preload() {
  img = loadImage('url_of_image.jpg', imgLoaded);
}

function imgLoaded() {
  //图片加载完成后的处理
}

上述代码中，preload()函数在页面加载时调用，使用loadImage()函数加载指定URL的图片。当图片加载完成后，将会调用imgLoaded()函数进行处理。

显示图片

在图片加载完成后，我们需要将其显示在网页上。可以通过调用image()函数来实现。

function draw() {
  background(255); // 设置背景为白色
  image(img, 0, 0, width, height); // 将图片显示在画布上
}

上述代码中，draw()函数是p5.js库中的主函数，会在每帧画面绘制时被调用。在此函数中，先设置了背景颜色为白色，然后调用image()函数将图片显示在画布上。函数的第一个参数是我们加载并保存的图片对象，后面四个参数表示图片在画布上的位置和大小。

示例说明

示例一：加载远程图片

下面的代码演示了如何加载远程图片并在画布上显示。

let img;
function preload() {
  img = loadImage('https://source.unsplash.com/random', imgLoaded);
}

function imgLoaded() {
  console.log('图片加载成功！');
}

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

function draw() {
  background(255); // 设置背景为白色
  image(img, 0, 0, width, height); // 将图片显示在画布上
}

该示例中，我们使用https://source.unsplash.com/random作为图片的URL，这是一个随机图片生成网站。在preload()函数中，我们调用loadImage()函数加载该URL的图片。当图片加载完成后，将调用imgLoaded()函数输出一段提示信息。在draw()函数中，我们将图片显示在画布上。

示例二：加载本地图片

下面的代码演示了如何加载本地图片并在画布上显示。

let img;
function preload() {
  img = loadImage('path_to_image.jpg', imgLoaded);
}

function imgLoaded() {
  console.log('图片加载成功！');
}

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

function draw() {
  background(255); // 设置背景为白色
  image(img, 0, 0, width, height); // 将图片显示在画布上
}

该示例中，我们使用path_to_image.jpg作为图片的URL。在preload()函数中，我们调用loadImage()函数加载该图片。当图片加载完成后，将调用imgLoaded()函数输出一段提示信息。在draw()函数中，我们将图片显示在画布上。

小结

本教程介绍了如何使用p5.js库加载图片并在网页上显示。我们先通过loadImage()函数加载图片，然后使用image()函数将其显示在画布上。通过示例，您已经掌握了如何加载远程图片和本地图片。在使用本教程中的示例代码时，请将URL或路径替换为您所使用的图片。