JavaScript开发点击计分游戏时，分数打印叠印重叠该如何解决

出现分数叠印、旧内容擦不掉的根本原因是：你只在setup()函数里执行了一次background(0)刷黑底。而p5.js的draw()是逐帧循环执行的绘制函数，循环运行过程中从来没有主动清除过画布上的旧像素——上一帧画的旧分数、小球轮廓会一直留在画布表层，新绘制的内容直接叠加在旧像素上，时间久了分数显示区就会留下层层叠叠的模糊白痕。

• 把background(0)的调用从setup()挪到draw()函数的最开头，保证每帧开始绘制新内容前，先把整个画布刷成和初始状态一致的黑色，彻底清除上一帧的所有残留
• 注意绘制顺序：刷背景的操作要放在设置白色填充色、绘制小球和文字之前，避免填充色被混用，导致画面颜色异常
  修正后的核心代码片段：

function setup() {
  createCanvas(550, 350);
  // 此处不需要重复写background(0)，draw循环会自动每帧刷背景
}

function draw() {
  // 每帧最先执行清屏操作
  background(0);
  // 后续再设置白色，用于绘制小球和分数文字
  fill(255);
  ellipse(x, y, r, r);
  text("Score:" + points, width/2, 40);
}

这套每帧清屏的写法是p5.js动画绘制的标准逻辑，后续如果给小球加“点击后随机换位置”的功能，这个逻辑还能避免旧位置的小球留下长长的拖影，不用额外加专门擦除分数区域的代码，就能完全解决叠印问题。

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