javascript - HTML5 Canvas 绘图像素与提供的颜色不同

Question

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

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

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

Answer 1

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

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

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

旧答案:

您遇到的情况可能是 Canvas 标准中仅部分实现颜色和 Gamma 校正部分的结果。

不同颜色值的原因，至少在涉及包含 ICC 配置文件的图像时，是由于浏览器中内置的颜色和 Gamma 校正:

4.8.11.1 Color spaces and color correction

The canvas APIs must perform color correction at only two points: when rendering images with their own gamma correction and color space information onto the canvas, to convert the image to the color space used by the canvas (e.g. using the 2D Context's drawImage() method with an HTMLImageElement object), and when rendering the actual canvas bitmap to the output device.

来源:w3.org

但是，它还在第 4.8.11.1 节中指出:

Note: Thus, in the 2D context, colors used to draw shapes onto the canvas will exactly match colors obtained through the getImageData() method.

由于本文所写的状态是进行中，我的猜测是浏览器对颜色和 Gamma 校正有一个“惰性”实现，目前它还会影响形状 - 或者 - 所有颜色信息来自 Canvas 的更正为显示配置文件作为第一个引用中的后一点。在标准成为最终标准之前，这可能不会改变。