如何在不操作背景的前提下绘制逐渐淡出的对象拖尾？

实现思路 #

• 维护一个数组存储椭圆的历史位置、以及每个位置对应的生成时间戳
• 每次帧更新时，先把当前椭圆的位置加入历史数组
• 绘制时先遍历历史数组，按生成时间计算每个拖尾片段的alpha：从椭圆本身的alpha随时间衰减到你设定的固定最低alpha，达到最低值后就不再继续衰减
• 超过设定的最大拖尾长度的历史记录可以定期删除，避免数组无限膨胀

下面用入门友好的p5.js给出可直接运行的示例，逻辑通用可以直接迁移到其他渲染框架：

// 可自定义参数
let ellipseX = 0, ellipseY = 0;
let trailHistory = [];
const maxTrailLength = 50; // 拖尾最大片段数，控制拖尾总长度
const minTrailAlpha = 0.2; // 拖尾最终保留的最低亮度，为原椭圆亮度的20%
const ellipseAlpha = 1; // 原椭圆本身的透明度
const fadeDuration = 1500; // 拖尾从全亮度衰减到最低值的耗时，单位毫秒

function setup() {
  createCanvas(800, 600);
  noStroke();
}

function draw() {
  // 清空画布
  background(220);
  
  // 更新椭圆位置，这里用鼠标位置做演示，可替换为你自己的移动逻辑
  ellipseX = mouseX;
  ellipseY = mouseY;
  
  // 新增当前位置到拖尾历史
  trailHistory.push({
    x: ellipseX,
    y: ellipseY,
    time: millis()
  });
  
  // 裁剪历史数组，避免无限占内存
  if (trailHistory.length > maxTrailLength) {
    trailHistory.shift();
  }
  
  // 先绘制所有拖尾片段
  for (let i = 0; i < trailHistory.length; i++) {
    const trail = trailHistory[i];
    const timePassed = millis() - trail.time;
    // 计算alpha，限制最低值为minTrailAlpha
    let alpha = map(timePassed, 0, fadeDuration, ellipseAlpha, minTrailAlpha);
    alpha = constrain(alpha, minTrailAlpha, ellipseAlpha);
    
    fill(255, 0, 0, alpha * 255); // 这里用红色做演示，可替换为自定义颜色
    ellipse(trail.x, trail.y, 30, 30); // 若需要拖尾大小衰减，可在这里对半径做map计算
  }
  
  // 最后绘制最上层的原椭圆，避免被拖尾覆盖
  fill(255, 0, 0, ellipseAlpha * 255);
  ellipse(ellipseX, ellipseY, 30, 30);
}

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