在 p5.js 中进行图形编程时，开发者有时会遇到文本或图形元素在画布上出现重复或“残影”的现象。这通常是由于对 p5.js 核心渲染循环机制的误解，以及对异步资源加载处理不当所致。本教程将详细解释这些问题，并提供专业的解决方案。
理解 p5.js 的渲染循环
p5.js 的程序结构主要由两个核心函数构成：setup() 和 draw()。
- setup() 函数在程序启动时仅执行一次，用于初始化画布、加载资源（通常是同步加载）和设置初始环境。
- draw() 函数则是一个连续循环，默认情况下每秒执行多次（通常为 60 次），用于绘制动画、响应用户输入或更新场景。
正是 draw() 函数的这种连续执行特性，如果不加以适当管理，很容易导致视觉上的重影问题。
问题根源一：画布未清空导致的重影
当 draw() 函数在每一帧执行时，它会在上一帧绘制的内容之上继续绘制。如果画布没有被显式清空，那么每次绘制的文本或图形就会叠加在之前的位置上，从而形成重复或拖影效果。
原始问题代码示例（简化）：
let img;
function setup() {
createCanvas(screen.availWidth, screen.availHeight);
img = loadImage('https://example.com/circuit1.webp'); // 异步加载
}
function draw() {
// 每次循环都会在已有内容上绘制
image(img, screen.availWidth / 2 - img.width, 0, img.width * 1.25, img.height * 1.25);
textSize(20);
text('5V', screen.availWidth / 2 - img.width - 20, img.height / 2 + 30);
// ... 其他 text() 调用
}在上述代码中，draw() 函数每次执行时都会绘制图像和文本，但并没有清空画布。因此，每一帧的绘制都会叠加在上一帧之上，导致文本出现多次。
解决方案：清空画布
解决此问题的最直接方法是在 draw() 函数的开头清空画布。p5.js 提供了两种主要方法：background() 和 clear()。
-
background(color): 使用指定颜色填充整个画布。这是最常用的方法，因为它能确保画布在每一帧都被完全覆盖，提供一个干净的背景。
function draw() { background(220); // 将背景设置为浅灰色，每一帧都会刷新 image(img, screen.availWidth / 2 - img.width, 0, img.width * 1.25, img.height * 1.25); textSize(20); text('5V', screen.availWidth / 2 - img.width - 20, img.height / 2 + 30); // ... 其他绘制代码 } -
clear(): 将画布清空为完全透明。这在需要叠加多个图层或与外部 HTML 元素交互时非常有用。
function draw() { clear(); // 将画布清空为透明，每一帧都会刷新 image(img, screen.availWidth / 2 - img.width, 0, img.width * 1.25, img.height * 1.25); textSize(20); text('5V', screen.availWidth / 2 - img.width - 20, img.height / 2 + 30); // ... 其他绘制代码 }选择 background() 还是 clear() 取决于你的具体需求。通常，background() 更常用，因为它提供了一个可见的背景。
问题根源二：异步资源加载导致的位置偏移
p5.js 中的 loadImage()、loadFont() 等函数是异步的。这意味着当你在 setup() 中调用它们时，程序不会等待资源完全加载完毕才继续执行。draw() 循环可能会在图像完全加载之前就开始运行。
在图像未完全加载时，img.width 和 img.height 等属性可能返回默认值（例如 1 或 0），而不是图像的真实尺寸。如果你的绘制逻辑依赖于这些尺寸来定位元素（如文本），那么在图像加载过程中，文本可能会被绘制在错误的位置。一旦图像加载完成，img.width 更新为真实值，文本又会在正确的位置被绘制，从而导致在加载期间出现两次文本的视觉效果。
解决方案：使用 preload() 同步加载资源
p5.js 提供了 preload() 函数，它是一个特殊的函数，会在 setup() 和 draw() 之前执行，并且会暂停程序的执行，直到所有在其中调用的异步加载函数（如 loadImage()）都完成。这确保了在 setup() 和 draw() 开始执行时，所有必要的资源都已完全加载并可用。
改进后的代码示例：
let img;
// fix 1: 使用 preload() 确保图像在 setup() 和 draw() 之前完全加载
function preload() {
img = loadImage("https://mediumpurpleperfumeddegrees.boyuan12.repl.co/circuit1.webp");
}
function setup() {
createCanvas(screen.availWidth, screen.availHeight);
// textOutput(); // 原始代码中的函数，与画布渲染无关，可忽略或移除
}
function draw() {
// fix 2: 在每一帧开始时清空画布
background(220); // 或者 clear();
image(img, screen.availWidth / 2 - img.width, 0, img.width * 1.25, img.height * 1.25);
textSize(20);
text("5V", screen.availWidth / 2 - img.width - 20, img.height / 2 + 30);
text("50Ω", screen.availWidth / 2 - img.width + 100, img.height / 2 - 45);
text("100Ω", screen.availWidth / 2 - img.width + 220, img.height / 2 + 50);
}通过在 preload() 中加载图像，我们确保了在 draw() 函数第一次执行时，img.width 和 img.height 已经是图像的真实尺寸，从而避免了因尺寸变化导致的文本偏移问题。同时，background(220) 确保了每一帧画布都被刷新，消除了重影。
优化：对于静态场景使用 noLoop()
如果你的 p5.js 草图是一个静态场景，不需要任何动画或用户交互来触发重绘，那么让 draw() 函数持续循环是浪费系统资源的。在这种情况下，你可以在 setup() 函数中调用 noLoop() 来停止 draw() 循环。draw() 函数将只执行一次。
适用于静态场景的优化方案：
let img;
function preload() {
img = loadImage("https://mediumpurpleperfumeddegrees.boyuan12.repl.co/circuit1.webp");
}
function setup() {
createCanvas(screen.availWidth, screen.availHeight);
background(220); // 对于静态场景，只需在 setup() 中绘制一次背景
// textOutput(); // 原始代码中的函数
noLoop(); // fix 3: 停止 draw() 循环，因为场景是静态的
}
function draw() {
// 这里的代码只会在 setup() 后执行一次
image(img, screen.availWidth / 2 - img.width, 0, img.width * 1.25, img.height * 1.25);
textSize(20);
text("5V", screen.availWidth / 2 - img.width - 20, img.height / 2 + 30);
text("50Ω", screen.availWidth / 2 - img.width + 100, img.height / 2 - 45);
text("100Ω", screen.availWidth / 2 - img.width + 220, img.height / 2 + 50);
}在这种情况下，draw() 函数只会在 setup() 之后执行一次。由于画布不再连续刷新，background() 或 clear() 只需要在 setup() 中调用一次即可（如果需要背景）。
总结与最佳实践
为了在 p5.js 中创建稳定、高效且无重影的视觉效果，请遵循以下最佳实践：
- 始终清空画布： 如果你的草图包含动画或需要连续更新，请在 draw() 函数的开头使用 background() 或 clear() 来清空画布。
- 使用 preload() 加载异步资源： 对于图像、字体、JSON 数据等外部资源，请务必在 preload() 函数中加载它们，以确保在 setup() 和 draw() 执行时这些资源已完全可用，避免因异步加载导致的布局问题。
- 合理使用 noLoop()： 如果你的草图是一个静态展示，不需要动画或持续的用户交互，在 setup() 中调用 noLoop() 可以停止 draw() 循环，从而节省 CPU 资源。你可以通过 redraw() 手动触发一次 draw() 执行，以响应特定事件（例如用户点击）。
通过理解并应用这些原则，你将能够更有效地控制 p5.js 的渲染流程，创建出高质量、无瑕疵的交互式艺术作品和应用程序。
