p5.js 教程：使用 preload() 加载、显示及处理图片

使用 preload() 加载、显示及处理图片

一、preload()函数与图片上传

preload() 是 p5.js 中一个特殊的生命周期函数，其执行时机与 setup() 类似，仅在程序启动时运行一次，但严格优先于 setup() 执行。

通常建议将所有媒体资源（如图片、音频）的加载逻辑置于 preload() 中。该函数的核心特性在于阻塞程序启动：只有当 preload() 内的所有加载任务全部完成，程序才会继续执行后续代码。这种机制有效避免了在资源未就绪时访问媒体对象导致的运行时错误。

在编写加载代码前，必须先将图片文件上传至项目环境中。

具体操作步骤如下：

1. 点击编辑器左上角的小三角图标，展开文件目录面板。

2. 在文件目录面板的右上角点击小三角，展开菜单选项，选择“Add File”（添加文件）。

3. 支持直接拖拽图片文件至上传区域，系统会自动完成上传。上传完成后关闭对话框即可。该过程支持 jpg 和 png 两种常见图片格式。

p5.js 图片加载教程：preload 用法与 tint 染色拉伸详解

二、加载图片

接下来，在代码中实现图片的加载与显示，参考以下代码结构：

var img; 
function preload(){ 
 //加载图片文件 
 img=loadImage("HearthStone.png"); 
} 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 //坐标原点设为图片中心 
 imageMode(CENTER); 
 //绘制图片 
 image(img,200,200); 
} 

上述代码主要涉及两个关键函数：

imageMode()：用于定义图片绘制的参考模式。常用参数包括 CENTER（以图片中心为基准点）和 CORNER（以图片左上角为基准点）。

image()：用于在画布上绘制图片。其基本语法为 image("图片地址或对象", x, y)，其中 x 和 y 为图片在画布上的坐标位置。

运行上述代码后的显示效果如下：

三、图片染色与拉伸

p5.js 提供了便捷的图像处理功能，包括对图片进行染色和尺寸拉伸，具体实现代码如下：

var img; 
function preload(){ 
 //加载图片文件 
 img=loadImage("HearthStone.png"); 
} 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 //坐标原点设为图片中心 
 imageMode(CENTER); 
 //图片染色 
 tint(0,255,255); 
 //绘制图片，后两个参数调整长宽 
 image(img,200,200,150,150); 
} 

tint()：用于为图片添加颜色滤镜。括号内需填入颜色值，其格式规范与 fill() 函数一致。

image()：该函数的第四和第五个参数分别用于指定图片的宽度和高度。若省略这两个参数，图片将保持原始尺寸进行绘制。

应用染色与拉伸后的效果图如下：

本文涵盖了 p5.js 中图片加载、显示及基础处理的核心内容，希望对您的学习有所帮助。欢迎继续支持本站获取更多技术资源。