HTML5画布绘制像素的颜色与提供的颜色不同

HTML5 Canvas drawing pixels with different color than the one provided

本文关键字：颜色 像素 布绘制 绘制 HTML5      更新时间：2023-09-26

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

我在js-fiddle上为任何想研究这个问题的人制作了一个简单的测试套件：http://jsfiddle.net/LaPdP/1/

关于为什么会发生这种情况，有什么想法吗？如果有办法解决的话？如果它至少总是发生在同一个值上，那么我只会通过将它增加1来绕过它，但对我来说这似乎很随机

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

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

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

老答案：

您所经历的可能只是画布标准中颜色和伽玛校正部分的部分实现的结果。

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

4.8.11.1颜色空间和颜色校正

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

来源：w3.org

然而，它也在第4.8.11.1节中说明：

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

由于写这篇文章的状态是work in progress，我猜测浏览器有一个"懒惰"的颜色和伽玛校正实现，目前也会影响形状——或者——画布上的所有颜色信息都被校正为在第一句话中显示后一点的配置文件。在标准成为最终标准之前，这种情况可能不会改变。

相关文章：