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

编程问答 2022-05-21

问题描述

背景

我正在实施一个动画，该动画需要根据移动物体的速度跟踪它们。最简单的方法 which people used for long time 是绘制对象，然后使用小的 alpha 值 (~5%) 定期fillRect() 使用背景颜色rgba(12,1) 场景。

问题

然而，粒子很久以前的背景永远不会达到它的原始颜色：

particles

似乎永远不会达到真正的不透明颜色。在我测试的每个浏览器（FF、Chrome、Safari）中，它都停在 const ctx = document.getElementById('canvas').getContext('2d'); const count = document.getElementById('count'); const color = document.getElementById('color'); ctx.fillStyle = 'rgb(255,0)'; ctx.fillRect(0,100,100); var counter = 0; ctx.fillStyle = 'rgba(0,0.04)'; window.setInterval(() => { ctx.fillRect(0,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>
isascii()

解决方案？

这个问题似乎被描述为 far back as 2011 没有解决方案（像素操作导致不可接受的 cpu 使用率）。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

canvashtmlhtml5-canvasjavascript