如何自定义p5.js中preload()阶段的默认加载动画？

因为p5.js的默认加载提示在黑色背景下辨识度低，这里给你两种适合JavaScript新手的简单解决方案：

方法一：修改默认加载元素样式（最简单） #

p5.js会自动生成一个带.p5loading类的元素作为加载提示，你只需在HTML的<head>标签里添加一段CSS，就能直接修改它的样式：

<style>
.p5loading {
  color: #ffffff; /* 把文字改成白色，和黑色背景区分开 */
  font-size: 24px; /* 放大文字，提升显眼程度 */
  text-align: center;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  background: rgba(0,0,0,0.6); /* 加半透明背景，增强文字可读性 */
  padding: 20px 0;
}
</style>

无需改动JavaScript代码，直接就能让默认加载提示适配黑色背景。

方法二：完全自定义加载界面（更灵活） #

如果想要设计独特的加载效果（比如添加动画），可以按以下步骤操作：

1. 在HTML中添加自定义加载元素 #

在<body>里的p5画布元素之前，插入你自己设计的加载界面：

<div id="custom-loader" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000000; display: flex; flex-direction: column; justify-content: center; align-items: center;">
  <p style="color: #ffffff; font-size: 30px; margin-bottom: 20px;">游戏加载中，请稍候...</p>
  <div style="width: 50px; height: 50px; border: 4px solid #ffffff; border-top-color: #4CAF50; border-radius: 50%; animation: spin 1s linear infinite;"></div>
</div>

<style>
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

2. 在p5.js代码中控制界面显隐 #

p5.js的setup函数会在preload加载完成后执行，我们可以在setup里隐藏自定义加载界面：

function preload() {
  // 这里写你的资源加载代码，比如：
  // bgImage = loadImage('background.jpg');
  // bgSound = loadSound('bgm.mp3');
}

function setup() {
  createCanvas(800, 600);
  background(0); // 设置你的黑色游戏背景
  // 隐藏自定义加载界面
  document.getElementById('custom-loader').style.display = 'none';
}

function draw() {
  // 你的游戏逻辑代码
}

页面加载时会先显示自定义加载界面，等preload中的资源全部加载完成后，setup执行就会隐藏加载界面，显示游戏画布。

内容的提问来源于stack exchange，提问作者idontknowwhattoputhere