1.preload()功能和图像上传

preload()函数是一个特殊的函数，与setup()类似，只在程序开始时运行一次，但顺序在setup()之前。

一般我们把加载媒体文件(图片和声音)的语句放在preload()中，因为preload()有一个特点，就是程序加载后才会启动，保证程序运行时不会出错。

我们需要在加载图片之前上传图片文件。

方法是：

点击编辑器左上角的小三角形，展开文件目录。

点击文件目录右上角的小三角形，展开菜单，添加文件。

可以直接将图片文件拖到盒子里，自动上传，传输后关闭。支持jpg和png两种格式。

第二，加载图片

接下来，添加以下代码：

var img函数preload(){ //加载图片文件img=load image(' heartstone . png ')；}函数设置(){ createCanvas(400，400)；}函数draw(){ background(220)；//坐标原点设置为imageMode(CENTER)；//绘制图片图像(img，200，200)；}有两种功能：

ImageMode():设置图片center，常用的是CENTER和CORNER，以CENTER为中心，CORNER为左上角

Image():绘制图片，图片('图片地址'，x，y)

渲染：

三、画面的染色和拉伸

P5.js还提供了一些方便的功能，比如染色和拉伸。代码如下：

var img函数preload(){ //加载图片文件img=load image(' heartstone . png ')；}函数设置(){ createCanvas(400，400)；}函数draw(){ background(220)；//坐标原点设置为imageMode(CENTER)；//图像染色色调(0，255，255)；//画一幅图，调整最后两个参数(图像(img，200，200，150，150)的长度和宽度；} tint():给图片染色，用颜色填充括号，格式与fill()相同

Image():第四个和第五个参数是图片的长度和宽度。如果没有填写，将使用原始图片的长度和宽度

渲染：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。