javascript - Canvas Transparency 创建永久残像

Question

我正在尝试在线条具有褪色痕迹的情况下实现追踪效果。我尝试这样做的方法是简单地绘制一次纯色背景，然后在绘制新线条之前在更多帧上绘制透明背景，这样您仍然可以看到它之前的一些图像。

问题是我确实希望线条在一段时间后完全淡出，但它们似乎会留下永久的残像，即使在反复绘制它们之后也是如此。

我已经尝试设置不同的 globalCompositeOperation(s)，但似乎我找错了树。

这段代码被调用一次

//initiate trace bg
traceBuffer.getContext("2d").fillStyle = "rgba(0, 30, 50, 1)";
traceBuffer.getContext("2d").fillRect(0, 0, traceBuffer.width, traceBuffer.height);

然后在它调用的 setInterval 函数中

//draw transparent background
ctx.fillStyle = "rgba(0, 30, 50, 0.04)";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

//set drawing settings
ctx.strokeStyle = "#AAAAAA";
ctx.lineWidth = 4;

for (let i = 0; i < tracer.layer2.length; i++){
    ctx.beginPath();
    ctx.moveTo(newX, newY);
    ctx.lineTo(oldX, oldY);
    ctx.stroke();
}

这是一个例子:https://i.imgur.com/QTkeIVf.png

左边是我目前得到的，右边是我实际想要发生的编辑。

Answer 1

这就是我要做的。我会建立粒子在轨道上移动的历史。位置越老，填充的 alpha 值越小。另外，为了获得更好的效果，我会减小圆圈的大小。

希望这就是您所需要的。

PS:我很想拥有你的曲线。因为我没有它，所以我画了一个不同的。

const hypotrochoid = document.getElementById("hypotrochoid");
const ctx = hypotrochoid.getContext("2d");
const cw = (hypotrochoid.width = 300);
const ch = (hypotrochoid.height = 300);
const cx = cw / 2,
      cy = ch / 2;

ctx.lineWidth = 1;
ctx.strokeStyle = "#d9d9d9";
// variables for the hypotrochoid
let a = 90;
let b = 15;
let h = 50;
// an array where to save the points used to draw the track
let track = [];
//add points to the track array. This will be used to draw the track for the particles
for (var t = 0; t < 2 * Math.PI; t += 0.01) {
  let o = {};
  o.x = cx + (a - b) * Math.cos(t) + h * Math.cos((a - b) / b * t);
  o.y = cy + (a - b) * Math.sin(t) - h * Math.sin((a - b) / b * t);
  track.push(o);
}


// a function to draw the track
function drawTrack(ry) {
  ctx.beginPath();
  ctx.moveTo(ry[0].x, ry[0].y);
  for (let t = 1; t < ry.length; t++) {
    ctx.lineTo(ry[t].x, ry[t].y);
  }
  ctx.closePath();
  ctx.stroke();
}


// a class of points that are moving on the track
class Point {
  constructor(pos) {
    this.pos = pos;
    this.r = 3;//the radius of the circle
    this.history = [];
    this.historyLength = 40;
  }

  update(newPos) {
    let old_pos = {};
    old_pos.x = this.pos.x;
    old_pos.y = this.pos.y;
    //save the old position in the history array
    this.history.push(old_pos);
    //if the length of the track is longer than the max length allowed remove the extra elements
    if (this.history.length > this.historyLength) {
      this.history.shift();
    }
    //gry the new position on the track
    this.pos = newPos;
  }

  draw() {
    for (let i = 0; i < this.history.length; i++) {
      //calculate the alpha value for every element on the history array
      let alp = i * 1 / this.history.length;
      // set the fill style
      ctx.fillStyle = `rgba(0,0,0,${alp})`;
      //draw an arc
      ctx.beginPath();
      ctx.arc(
        this.history[i].x,
        this.history[i].y,
        this.r * alp,
        0,
        2 * Math.PI
      );
      ctx.fill();
    }
  }
}


// 2 points on the track
let p = new Point(track[0]);
let p1 = new Point(track[~~(track.length / 2)]);

let frames = 0;

let n, n1;

function Draw() {
  requestAnimationFrame(Draw);
  ctx.clearRect(0, 0, cw, ch);
  //indexes for the track position 
  n = frames % track.length;
  n1 = (~~(track.length / 2) + frames) % track.length;
  //draw the track
  drawTrack(track);
  // update and draw the first point
  p.update(track[n]);
  p.draw();
  // update and draw the second point 
  p1.update(track[n1]);
  p1.draw();
  //increase the frames counter
  frames++;
}

Draw();

canvas{border:1px solid}

<canvas id="hypotrochoid"></canvas>