p5.js如何在setup设置背景变量 换背景同时保留彩虹拖尾

核心思路是把背景层和绘制内容层拆分：画布本身只用来画彩虹圆弧轨迹，保持透明，肉眼看到的背景色直接用canvas元素的CSS样式控制。切换背景时只改CSS属性，完全不碰画布上已经画好的像素，从根上避免重绘背景清空拖尾的问题，所有需求都能满足。

实现要点 #

• 不需要把background()放到draw循环里，全程不会每帧清空画布
• 初始背景配置逻辑全部放在setup内，符合代码结构要求
• 只在鼠标进出画布、背景状态真的需要变化时才执行切换，平时没有额外性能开销
• 原有彩虹圆弧的绘制代码几乎不用改，拖尾效果100%保留

完整代码 #

HTML依赖（和原有代码一致） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

JavaScript代码 #

let bg = '#ffffff' // 初始背景白色，后续可直接修改这个变量调整默认背景色
let hueV2 = 0
let position = 0
let isMouseInCanvas = false // 标记鼠标是否在画布区域内

function setup() {
  // 创建画布
  const cnv = createCanvas(500, 500)
  // 初始背景设置放在setup内，给canvas设置CSS背景色
  cnv.style('background-color', bg)
  // 清空画布为透明状态，让CSS背景色透出
  clear()
}

function draw() {
  colorMode(HSL);

  // 判断鼠标当前是否在画布范围内
  const currentMouseState = mouseX >= 0 && mouseX <= width && mouseY >=0 && mouseY <= height
  // 仅在鼠标进出画布、状态发生变化时切换背景，避免重复操作
  if (currentMouseState !== isMouseInCanvas) {
    isMouseInCanvas = currentMouseState
    // 鼠标在画布内时切黑色，移出切回初始白色，要改其他交互颜色直接改这里的色值就行
    canvas.style.backgroundColor = isMouseInCanvas ? '#000000' : bg
  }

  // 以下是原有的彩虹旋转圆形逻辑，完全不需要改动
  strokeWeight(13);
  stroke(hueV2, 90, 61)
  hueV2 = hueV2 + 1
  arc(410, 240, 50, 50, position, position + 0.001, OPEN);
  position += 2.5

  if (hueV2 >= 360) {
    hueV2 = 0
  }
}

效果说明 #

• 页面加载后初始为白色背景，和原有代码效果完全一致
• 鼠标移入画布区域时，背景瞬间切换为黑色，已经画出来的彩虹拖尾完全保留，不会被清空
• 鼠标移出画布时背景切回白色，拖尾依然存在
• draw循环全程不调用background()，不会出现每帧重绘覆盖内容的问题

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