gpt4 book ai didi

javascript - 为什么在 HTML5 Canvas 上反复绘制半透明填充不能完全覆盖?

转载 作者:行者123 更新时间:2023-12-04 13:29:43 26 4
gpt4 key购买 nike

这到底是怎么回事?
为什么混合突然停止在 255,214,214,255 ?这是预期的行为吗?
我以为它最终会打到 255,255,255,255 ,但事实并非如此。它甚至没有接近。从一开始的红色矩形永远不会消失为白色,它保持颜色 255,214,214,255永远。

const ctx = document.querySelector('canvas').getContext('2d');

// draw "red"
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 300, 200);

function loop() {

// log new colors
if (getCurrentColor() !== loop.lastColor) {
console.log(loop.lastColor = getCurrentColor());
}

// draw "transparent white" repeatedly
ctx.fillStyle = 'rgba(255,255,255,0.01)';
ctx.fillRect(0, 0, 300, 200);

// schedule next iteration
requestAnimationFrame(loop);
}
loop(); // start loop

function getCurrentColor() {
return ctx.getImageData(0, 0, 1, 1).data.join(',');
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas width="300" height="200"></canvas>
</body>
</html>

解释和解决方案都非常感谢! :P

最佳答案

标的图形缓冲区 对于 HTML/JS Canvas 是 位图 , 仅允许 Integer颜色值来自 0255 .这意味着每个渲染操作的输出必须是 圆形 !
假设您从颜色值 214 开始.如果你再混214 * 0.99 + 255 * 0.01 ,理论上你会得到 214.41 .但随后将其四舍五入为 214存储在 Canvas 位图中!!
所以,基本上,你被困在 214 上。 (或任何其他值,只要您的步数小于 0.5 )xD
不幸的是,没有办法使用纯 JavaScript 来规避这一点,因为您无法更改图形缓冲区架构或混合/合成操作。
但我敢肯定,如果你真的想的话,你可以破解它。通过实现 Float32通过 WebGL API 的图形缓冲区, 或类似的东西。

关于javascript - 为什么在 HTML5 Canvas 上反复绘制半透明填充不能完全覆盖?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65807953/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com