p5.js preload()用法及代码示例

p5.js 中的 preload() 函数用于在 setup() 函数之前异步加载文件。它在草图加载时只运行一次。

大多数用户不使用 preload() 函数，因为在 setup() 函数中可以完成相同的任务。然而，在我们的程序中分离类似的代码以提高其可扩展性和模块化是很好的。通常 preload() 函数用于在草图中加载图像、3D 模型、字体等。 “loading…” 文本在资源加载过程中显示。

用法:

preload() {
   // All loading calls here
}

参数：该函数不接受任何参数。

下面的例子说明了 p5.js 中的 preload() 函数：

范例1：

Javascript


let gfg_img;
function preload() {
  
  // Loading the image
  gfg_img = loadImage('/gfg.png');
}
  
function setup() {
  createCanvas(400, 400);
}
  
function draw() {
  
  // Set background color to green
  background('green');
  
  // Show loaded image on screen at (100, 100)
  image(gfg_img, 100, 100);
}

输出：

范例2：

Javascript


let cylinder;
function preload() {
  
  // Loading a cylinder model
  cylinder = loadModel('/cylinder.stl', true);
}
  
function setup() {
  createCanvas(400, 400, WEBGL);
  noLoop();
}
  
function draw() {
  
  // Set background color to green
  background('green');
  
  // Display and rotate the model
  rotateX(90);
  model(cylinder);
}

输出：

相关用法

注：本文由纯净天空筛选整理自pratikraut0000大神的英文原创作品 p5.js preload() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。