p5.js图片加载教程：preload与上传、染色与拉伸

本篇p5.js入门教程主要介绍了如何在JavaScript编程中正确处理图片加载和显示。p5.js提供了一个preload()函数，用于在程序初始化前预加载媒体文件，确保它们在程序运行时已经准备好，避免因文件加载不完整导致的错误。通过以下步骤可以进行图片的上传： 1. 在p5.js的编辑器中，首先找到并点击左上角的小三角展开文件目录。 2. 点击右上角的下拉菜单，选择"Add File"，然后将图片文件（如jpg或png格式）直接拖放到指定区域，上传完成后关闭文件管理器。 加载图片的关键在于调用preload()函数并在其中指定图片路径，例如： ```javascript function preload() { img = loadImage("HearthStone.png"); } ``` 在setup()函数中，创建画布并设置图像模式： ```javascript function setup() { createCanvas(400, 400); imageMode(CENTER); // 设置图片绘制时以中心对齐 } ``` 在draw()函数中，通过image()函数绘制图片，并调整坐标和大小： ```javascript function draw() { background(220); image(img, 200, 200); // 默认使用原图片大小 // 或者调整图片尺寸，如染色并缩放 tint(0, 255, 255); // 设置图片颜色 image(img, 200, 200, 150, 150); // 缩小至150x150像素 } ``` tint()函数用于改变图片的颜色，接受红、绿、蓝三个通道的值，格式类似于fill()函数。通过这个教程，初学者可以掌握在p5.js中基本的图片加载、定位和颜色处理技巧，为后续更复杂的图像操作打下基础。