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

Question

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

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

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

Answer 1

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

不幸的是没有方便的方法来解决这个问题。

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

旧答案：

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

不同颜色值的原因（至少对于包含 ICC 配置文件的图像而言）是由于浏览器中内置的颜色和伽玛校正：

4.8.11.1 色彩空间和色彩校正

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

资料来源：w3.org

然而，它还在第 4.8.11.1 节中指出：

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

由于所写的状态是work in progress我的猜测，浏览器具有颜色和伽玛校正的“惰性”实现，当前也影响形状 - 或者 - 来自画布的所有颜色信息都被校正以显示配置文件，如后一点所示第一个报价。在标准最终确定之前，这可能不会改变。