javascript - Alpha 混合永远不会在 HTML Canvas 中达到不透明颜色

Question

背景

我正在实现一个动画，它需要根据移动对象的速度在移动对象后面留下轨迹。人们长期使用的最简单的方法是绘制对象，然后fillRect()使用小的 alpha 值（~5%）定期使用背景颜色绘制场景。

问题

但是，很久以前粒子所在的背景从未达到其原始颜色：

似乎永远无法达到真正的不透明颜色。在我测试的每个浏览器（FF、Chrome、Safari）中，它都停在rgba(12,0,0,1)：

const ctx = document.getElementById('canvas').getContext('2d');
const count = document.getElementById('count');
const color = document.getElementById('color');

ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(0, 0, 100, 100);

var counter = 0;
ctx.fillStyle = 'rgba(0,0,0,0.04)';
window.setInterval(() => {
  ctx.fillRect(0,0,100,100);
  count.textContent = ++counter;
  const d = ctx.getImageData(50, 50, 1, 1).data;
  color.textContent = `${d[0]}, ${d[1]}, ${d[2]}, ${d[3] / 255}`;
}, 50);

<canvas id="canvas"></canvas><br/>
Count: <span id="count">?</span><br/>
rgba(): <span id="color">?</span>

解决方案？

这个问题似乎早在 2011 年就被描述为没有解决方案（像素操作导致不可接受的 CPU 使用率）。

• 我错过了什么吗？
• 这是一种预期的行为，因为它在所有浏览器中都如此一致？
• 除了将背景设置为非黑色之外，还有什么聪明的方法吗？

标签： javascripthtmlcanvashtml5-canvas