深入理解：图形残影在 P5.js 中的成因
残影的形成机制
在 P5.js 的默认绘制模型中，上一帧的像素会在下一帧继续存在，除非你显式地覆写背景或清空画布。因此，若不进行持续的背景更新，移动的物体会在屏幕上留下“残影”，尤其在高帧率和复杂绘制下更明显。彻底消除残影的关键在于让每一帧都重新覆盖整块画布，而不是仅绘制新内容。
从像素层面看，残影源自于像素缓冲区的累积效果。只有在每帧都进行全局重绘（或使用透明度极低的覆盖），才能避免残留像素逐帧叠加。这也是为什么很多 P5.js 实战方案选择在 draw() 内部先执行一次背景绘制的原因。
帧绘制与背景更新的关系
draw() 是逐帧执行的核心循环，其中 background() 会将整张画布重新填充为指定颜色，等同于清屏。若不调用 background()，你就会看到上一帧的内容与当前帧的内容混合，从而产生残影效应。
在实现无残影的艺术作品时，正确的背景更新时机和颜色选择至关重要。例如，使用不透明背景会彻底清空之前的绘制，而使用透明或半透明背景则可能产生半透明的尾迹，需要权衡视觉效果与性能。
核心方法一：在 draw() 中用 background() 实现彻底清屏
基本做法与注意事项
在每一帧的绘制开头调用 background()，可确保上一帧的像素被完全覆盖，从而实现“无残影”的效果。务必使用不带渐变和透明度的背景颜色，以避免意外产生半透明尾迹。
除了颜色，背景清屏的调用应尽量放在绘制逻辑之前，确保随后绘制的内容不会被残留像素干扰。若你的作品需要颜色渐变或动态背景，请在背景绘制后再进行主体绘制。
let t = 0;function setup() {createCanvas(640, 360);frameRate(60);
}function draw() {// 彻底消除残影：每帧清屏background(0); // 纯黑色背景，确保不可透过// 在此之后绘制当前帧的内容fill(255, 200, 0);noStroke();ellipse(width / 2, height / 2, 100 + 60 * Math.sin(t), 100);t += 0.05;
}
不同背景颜色对视觉的影响
改变背景色会直接影响残影的可见性。使用高对比度的背景颜色有助于明确当前帧的轮廓，从而更容易观察到是否存在残影。若要实现夜景感或动态场景，可以在背景中加入轻微的更新，但要确保不会让旧帧信息持续累积。
若你的项目要求保留某些轨迹性信息，可以通过 临时的轻微透明背景覆盖来制造“长尾效果”，但这不再属于彻底消除残影的范畴，更多是视觉风格的选择。
核心方法二：使用 offscreen buffer（createGraphics）实现无残影渲染
原理与实现步骤
使用 offscreen buffer（通过 createGraphics() 创建的独立绘图缓冲区）可以将绘制工作局部化，在每帧重新清空缓冲区后再将缓冲区绘制到主画布上，从而实现更精细的清屏控制。
通过将绘制指令先写入缓冲区，再一次性显示，可以避免直接在主画布上对上一帧进行混合，从而达到“完全无残影”的效果。此外，offscreen buffer 便于实现双缓冲和离屏渲染等优化策略。
let off;function setup() {createCanvas(640, 360);// 创建离屏缓冲off = createGraphics(width, height);
}function draw() {// 清空离屏缓冲区off.clear();off.background(0); // 也可选择完全透明：off.clear() 即可off.fill(0, 200, 255);off.noStroke();off.ellipse(width * 0.5, height * 0.5, 120, 120);// 将离屏缓冲绘制到主画布image(off, 0, 0);
}
使用 clear() 与 background() 的对比
在 offscreen buffer 中，clear() 会把缓冲区完全清空为全透明；而 background() 会用指定颜色填充，即使缓冲区本身并非可见。将两者结合使用，可以实现更灵活的无残影策略。
如果你需要在缓冲区上叠加各种效果（如粒子、噪声等），建议先用 off.clear() 或 off.background() 清屏，再进行新的绘制，然后通过 image(off, x, y) 输出到主画布。
将 temperature=0.6 应用到实战：如何控制随机性与残影关系
将温度参数映射到绘制行为
在生成型绘画或交互式动画中，temperature（温度）可以用于控制随机性强度。设定一个全局变量 let temperature = 0.6;，并将其映射到偏移量、颜色漂移、粒子速度等属性上，可以让画面在无残影的前提下呈现更丰富的动态效果。
通过把温度与噪声、随机数种子结合，可以实现稳定又多变的视觉体验；同时，温度越高，随机性越明显，越低则越稳定，但要记住要优先确保背景清屏，以避免残影。
let t = 0;
const temperature = 0.6; // 温度参数，范围通常在 0.0 - 1.0function setup() {createCanvas(640, 360);frameRate(60);
}function draw() {background(0);// 根据温度控制随机偏移const offset = map(noise(t * 0.3), 0, 1, -60, 60) * temperature;fill(255, 180, 0);noStroke();ellipse(width / 2 + offset, height / 2, 120, 120);t += 0.01;
}
将温度用于颜色和透明度的融合
除了位置偏移，temperature 也可用于控制颜色变化和透明度，从而在清屏的前提下实现“看起来更活跃”的效果。你可以让颜色随温度变化而逐帧微调，或让 alpha 随温度改变以获得更平滑的视觉过渡。
以下示例演示了在无残影前提下，利用温度控制颜色的渐变与粒子透明度的做法：
let t = 0;
const temperature = 0.6;function setup() {createCanvas(640, 360);frameRate(60);
}function draw() {background(0);// 颜色随温度和噪声波动const hue = map(noise(t * 0.4), 0, 1, 0, 360);const alpha = map(temperature, 0, 1, 50, 255);colorMode(HSB, 360, 100, 100, 255);fill(hue, 80, 100, alpha);noStroke();ellipse(width / 2, height / 2, 120, 120);colorMode(RGB, 255);t += 0.01;
}
性能、分辨率与调试：确保稳定的无残影渲染
像素密度、帧率与画布尺寸的影响
高分辨率和高像素密度会增加绘制工作量，若未正确定义背景清屏，容易让残影在某些帧中压缩或错位显示。因此，在需要稳定无残影时，合理设置帧率和像素密度是关键，尤其在移动设备上。
你可以通过调用 pixelDensity(1) 将像素密度固定为 1，以减轻绘制压力，并保证背景清屏的一致性；若追求高保真，也可按设备特性动态调整。
function setup() {// 关闭高DPI，提升稳定性与性能pixelDensity(1);createCanvas(800, 600);frameRate(60);
}
画布尺寸与重绘成本
画布尺寸越大，单帧需要覆盖的像素越多，若背景清屏频率过高，可能影响性能。在无残影的前提下，尽量选择合适的画布尺寸，并通过分块绘制或离屏缓冲优化。
若你的应用对性能有严格要求，可以在 draw() 之外做初始化、资源加载等工作，将绘制逻辑尽量简化，并在每帧仅绘制必要的几何形状与颜色。
常见问题与排错清单
常见误区与解决办法
误区一：直接将半透明背景用于清屏，导致仍有残影。解决办法：使用不带 alpha 的背景颜色或清空离屏缓冲区后再显示。
误区二：不使用 background() 就算清屏，仍然看不到残影？解决办法：确保 draw() 的开头确实执行了背景绘制；如使用 offscreen buffer，确保缓冲区也被正确清空。
function setup() {createCanvas(400, 300);
}function draw() {// 如果未看到清屏效果，请确认背景调用在最前background(0);// 绘制当前帧fill(255);ellipse(width/2, height/2, 50, 50);
}
调试技巧与实用检查
要快速判断是否存在残影，可以在每帧绘制后截屏对比差异，或在绘制周期中临时将背景设置为极端颜色以确保可见性。
另外，使用 离屏缓冲 时，确保在每帧开始时对缓冲区执行 clear() 或 background()，并在输出前执行一次完整的渲染循环，以避免旧帧残留。
