HTML5 Canvas绘制的颜色与提供的颜色不同

Question

将某种颜色设置为画布的fillStyle并使用fillRect绘制一个矩形后，矩形的颜色有时会与提供的颜色略有不同（ getImageData返回不同的值 - 通常其中一个值低1）。 它似乎只发生在使用rgba颜色时（而不是rgb ），但实际上我确实需要使用alpha通道。

对于想要研究这个问题的人，我为js小提琴制作了一个简单的测试套件： http ： //jsfiddle.net/LaPdP/1/

关于为什么会发生这种情况的任何想法，以及是否有任何方法可以解决这个问题？ 如果它至少总是发生在相同的值上，那么我只是通过将其增加1来绕过它，但对我来说它似乎很随机。

Answer 1

2017年更新：我完全忘记了这个答案，但原因与获取/设置时预先倍增数据有关。 由于位图中的数字总是整数，因此预乘会的自然结果通常会导致非整数，因此会出现舍入误差。

遗憾的是，没有方便的方法来解决这个问题。

只是为了澄清下面的伽玛：Gamma（通过伽玛设置或ICC配置文件）将直接影响图像 ，但对于直接绘制到画布的形状，这不应该是一个问题本身，因为只有显示器伽玛在顶部调整，不是数据本身。

老答案：

您遇到的可能是仅在画布标准中部分实现颜色和伽马校正部分的结果。

各种颜色值的原因，至少在涉及包含ICC配置文件的图像时，是由于浏览器中的内置颜色和伽马校正：

4.8.11.1色彩空间和色彩校正

画布API必须仅在两点执行颜色校正：将具有自己的伽马校正和颜色空间信息的图像渲染到画布上时，将图像转换为画布使用的颜色空间（例如，使用2D上下文的drawImage（）方法使用HTMLImageElement对象），并将实际的画布位图渲染到输出设备。

资料来源： w3.org

但是，它也在第4.8.11.1节中说明：

注意：因此，在2D上下文中，用于在画布上绘制形状的颜色将与通过getImageData（）方法获得的颜色完全匹配。

由于写入的状态是work in progress的work in progress我的猜测是浏览器具有颜色和伽马校正的“懒惰”实现，其当前也影响形状 - 或者 - 来自画布的所有颜色信息被校正为显示简档作为第一个引用的后一点。 在标准成为最终标准之前，这可能不会改变。