0 
body {
    background-color:black;
}
#myCanvas {
    background-color:rgba(55,23,88,0.5); // (bg_R,bg_V,bg_B,bg_A)
}

var myCanvas= document.getElementById("myCanvas");
gl = myCanvas.getContext("webgl", {
         premultipliedAlpha: true ,
         alpha:true
});


gl.clearColor(0.8, 0, 0, 0.5); // (ccR,ccV,ccB,ccA)
gl.clear(gl.COLOR_BUFFER_BIT);

现在我正在查看生成的画布的颜色：

rvba = 222,8,33,255

var myCanvas= document.getElementById("myCanvas");

gl = myCanvas.getContext("webgl", {
  premultipliedAlpha: true ,
  alpha:true
});

gl.clearColor(0.8, 0, 0, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT);
var pixels = new Uint8Array( 4);
gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
console.log(pixels); // Uint8Array
* {
  margin:0;
}
body {
  background-color:black;
}
#myCanvas {
  background-color:rgba(55,23,88,0.5);
}
<canvas id="myCanvas"  ></canvas>

公式是什么？(final_R,final_V,final_B,final_A) = 函数 (bg_R,bg_V,bg_B,bg_A,ccR,ccV,ccB,ccA) ?

此外，如果 premultipliedAlpha 设置为 false，此函数如何更改？

谢谢 ！

编辑：哎呀...我在屏幕截图中读取了画布的结果颜色...但是值每次都在变化，现在我有 rvba = 227,0,20,255

好的..截图是一个非常奇怪的想法......现在我使用 gl.readpixel，我得到了：[204, 0, 0, 128]

所以，有了这个非常不同的结果，我的问题已经过时了。

对不起 ！

4

1 回答 1

1

你的例子是无效的。使用premultipliedAlpha: true（顺便说一句，这是默认设置）没有颜色这样的东西

gl.clearColor(0.8, 0, 0, 0.5);

为什么？因为颜色从 0.0 变为 1.0。由于 alpha 为 0.5，因此您在 R、G 或 B 中可以拥有的最高数字为 0.5，因为premultipliedAlpha: true这意味着 0.0 <-> 1.0 值乘以 alpha。1.0（可能的最高值）* 0.5 alpha = 0.5 因此您的 0.8 红色值gl.clearColor无效

根据 WebGL 规范未定义无效颜色，这意味着每个浏览器的结果可能不同。

至于premultiplyAlpha: truevs会发生什么premultiplyAlpha: false，WebGL 并没有真正定义它。对于有效的颜色，您可以假设premultiplyAlpha: true它是

dstColor = srcColor + dstColor * (1 - srcAlpha)

对于premultiplyAlpha: false您来说，有效颜色的结果应该是

dstColor = srcColor * srcAlpha + dstColor * (1 - srcAlpha)

但它实际上如何得到这个结果是不确定的。例如，它可能会首先乘以用于合成的纹理或着色器中的 alpha，然后使用与预乘 alpha 相同的值。

对于无效的颜色，你不能假设任何事情。也许它将处理超出范围的颜色到洋红色。它没有指定。

至于调用gl.readPixels只会给你画布中的值，而不是显示的值（取决于大量的 CSS 设置，这几乎可以是任何东西。）

作为一个简单的例子

var gl = document.querySelector("canvas").getContext("webgl");
var pixel = new Uint8Array(4);
gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
log("color:", pixel);

function log() {
  var pre = document.createElement("pre");
  pre.appendChild(document.createTextNode(Array.prototype.join.call(arguments, " ")));
  document.body.appendChild(pre);
}
<canvas style="background-color: rgb(255, 0, 0);"><canvas>

即使该画布的背景颜色是红色gl.readPixels返回 0,0,0,0

于 2016-07-28T17:40:07.190 回答