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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。