p5.js 文本渲染与图像加载最佳实践

在 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() 调用
}