P5.js如何加载图片
首先，preload()函数和图片上传
preload()函数是一个特殊的函数，类似于setup()，只在程序开始时运行一次，但顺序在setup()之前。
一般我们会把媒体文件(图片、声音)加载的语句放在preload()中，因为preload()有一个特点，就是程序只有加载后才会启动，保证了程序运行时不会出现错误。
在加载图片之前，我们需要上传图片文件。
方法是:
①点击编辑器左上角的小三角形，展开文件目录。
(2)点击文件目录右上角的小三角形，展开菜单，添加文件。
(3)你可以直接把图片文件拖到盒子里，盒子会自动上传，传输完后再关闭。支持jpg和png格式。
第二，加载图片
接下来，添加以下代码:
var img
函数预加载(){
//加载图片文件
img=loadImage("炉石. png ")；
}
功能设置(){
createCanvas(400，400)；
}
函数draw() {
背景(220)；
//坐标原点设置为图片中心。
imageMode(中间)；
//画一幅画
图像(img，200，200)；
}有两个功能:
ImageMode():设置图像中心，常用的是CENTER为中心，CORNER为左上角。
Image():画一张图片，image("图片地址"，x，y)。
渲染:
第三，画面染色和拉伸
P5.js还提供了一些方便的功能，比如染色、拉伸等。代码如下:
var img
函数预加载(){
//加载图片文件
img=loadImage("炉石. png ")；
}
功能设置(){
createCanvas(400，400)；
}
函数draw() {
背景(220)；
//坐标原点设置为图片中心。
imageMode(中间)；
//图片染色
色调(0.255，255)；
//画图，调整最后两个参数的长度和宽度。
图像(img，200，200，150，150)；
}tint():图片染色，括号内填充颜色。格式与fill()相同。
Image():第四个和第五个参数是图片的长度和宽度，否则使用原图片的长度和宽度。
渲染:
相信看完这个案例，你已经掌握了方法。更多精彩请关注Gxl上其他相关文章！
推荐阅读:
生成项目时，本地ip无法访问处理方法。
创建vue-cli+webpack的项目时出错。