将画布的全部内容淡化为透明而不是其他颜色的最快方法

Question

我想创建可视化效果，绘制的内容会逐渐消失。这应该是连续的，以便以后添加的内容比旧内容的褪色少，如下图所示：

我不想清除整个画布，我想使它上的所有内容都更透明-然后绘制任何新对象。

我的直觉是在每个帧中这样做：

ctx.fillStyle = "rgba(0,0,0,0)";
ctx.fillRect(0, 0, canvas.width, canvas.height);

但是问题是画布没有混合Alpha，而是将其用于混合其他颜色。

我如何才能使画布不断降低所绘制内容的不透明度？

Answer 1

您几乎肯定会在寻找canvas compositing operations！看起来“目的地”应该可以满足您的需求。

let canvas = document.getElementsByTagName('canvas')[0];
let ctx = canvas.getContext('2d');
let rand = n => Math.floor(Math.random() * n);
setInterval(() => {
  ctx.beginPath();
  ctx.arc(rand(300), rand(120), rand(60), Math.PI * 2, 0);
  ctx.fillStyle = `rgba(${rand(256)}, ${rand(256)}, ${rand(256)}, 1)`;
  ctx.globalCompositeOperation = 'source-over';
  ctx.fill();
}, 150);

let fadeOut = () => {
  let fadeAmount = 0.002;
  // Note that the colour here doesn't matter! Only the alpha matters.
  // The colour here is red, but you'll see no red appear
  ctx.fillStyle = `rgba(255, 0, 0, ${1 - fadeAmount})`;
  ctx.globalCompositeOperation = 'destination-in';
  ctx.fillRect(0, 0, 300, 120);
  requestAnimationFrame(fadeOut);
};
requestAnimationFrame(fadeOut);

canvas { border: 3px solid #808080; background-color: #000000; }

<canvas width="300" height="120"></canvas>

注意：当您设置ctx.globalCompositeOperation时，它将应用到您执行ctx.restore()或将ctx.globalCompositeOperation设置为新值之前！这有点棘手。

Answer 2

为什么不降低画布的不透明度，当画布的不透明度达到0时，请擦除画布上的所有内容，然后将不透明度值重置为1