在p5.js中绘制半透明颜色时的变换颜色
在p5.js中绘制半透明颜色时的变换颜色
提问于 2022-09-26 20:09:35
在p5.js中绘制alpha值低于255的颜色时，似乎应用了转换：
for (const color of [[1,2,3,255],[1,2,3,4],[10,11,12,13],[10,20,30,40],[50,100,200,40],[50,100,200,0],[50,100,200,1]]) {
clear();
background(color);
loadPixels();
print(pixels.slice(0, 4).join(','));
}Input/Expected Output Actual Output (Firefox)
1,2,3,255 1,2,3,255 ✅
1,2,3,4 0,0,0,4
10,11,12,13 0,0,0,13
10,20,30,40 6,19,25,40
50,100,200,40 51,102,204,40
50,100,200,0 0,0,0,0
50,100,200,1 0,0,255,1alpha值被保留，但RGB信息丢失，特别是在低alpha值时。
这使得可视化是不可能的，例如，首先绘制2D形状，然后通过更改alpha值来显示特定区域的可见性。
这些转换是否可以关闭，或者它们在任何方面都是可预测的？
更新:行为不特定于p5.js：
const ctx = new OffscreenCanvas(1, 1).getContext('2d');
for (const [r,g,b,a] of [[1,2,3,255],[1,2,3,4],[10,11,12,13],[10,20,30,40],[50,100,200,40],[50,100,200,0],[50,100,200,1]]) {
ctx.clearRect(0, 0, 1, 1);
ctx.fillStyle = `rgba(${r},${g},${b},${a/255})`;
ctx.fillRect(0, 0, 1, 1);
console.log(ctx.getImageData(0, 0, 1, 1).data.join(','));
}回答 1
Stack Overflow用户
发布于 2022-10-05 21:15:58
我可能离here...but很远，看起来在background方法中，如果_isErasing是真的，那么调用blendMode。默认情况下，这将适用于颜色的线性插值。
请参阅https://p5js.org/reference/#/p5/blendMode
混合-线性插值颜色:C=A*因子+ B.这是默认的混合模式.
所以，如果您将混合模式设置为REPLACE，我认为它应该可以工作。
替换-像素完全替换其他像素，而不使用alpha (透明)值。
即
blendMode(REPLACE);
for (const color of [[1,2,3,255],[1,2,3,4],[10,11,12,13],[10,20,30,40],[50,100,200,40],[50,100,200,0],[50,100,200,1]]) {
clear();
background(color);
loadPixels();
print(pixels.slice(0, 4).join(','));
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73859440
复制相关文章
相似问题
腾讯云开发者
