如何解决Alpha 混合永远不会达到 HTML Canvas 中的不透明颜色
背景
我正在实施一个动画,该动画需要根据移动物体的速度跟踪它们。最简单的方法 which people used for long time 是绘制对象,然后使用小的 alpha 值 (~5%) 定期fillRect()
使用背景颜色rgba(12,1)
场景。
问题
似乎永远不会达到真正的不透明颜色。在我测试的每个浏览器(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 举报,一经查实,本站将立刻删除。