2017 年更新:我完全忘记了这个答案,但原因与获取/设置时预乘数据有关。由于位图中的数字始终是整数,因此会出现舍入误差,因为预乘的自然结果通常会导致非整数数字。
不幸的是,没有方便的方法来解决这个问题。
只是为了澄清下面的伽玛:伽玛(通过伽玛设置或ICC配置文件)将直接影响图像,但对于直接绘制到画布上的形状,这本身应该不是问题,因为只有显示伽玛在顶部进行了调整,而不是数据本身。
老答案:
您遇到的可能只是画布标准中颜色和伽马校正部分的部分实现的结果。
至少对于包含 ICC 配置文件的图像而言,各种颜色值的原因是由于浏览器中内置的颜色和伽马校正:
4.8.11.1 色彩空间和色彩校正
画布 API 必须仅在两点执行颜色校正:在将具有自己的伽马校正和颜色空间信息的图像渲染到画布上时,将图像转换为画布使用的颜色空间(例如,使用 2D 上下文的 drawImage() 方法使用 HTMLImageElement 对象),以及在将实际画布位图渲染到输出设备时。
资料来源:w3.org
但是,它还在第 4.8.11.1 节中指出:
注意:因此,在 2D 上下文中,用于在画布上绘制形状的颜色将与通过 getImageData() 方法获得的颜色完全匹配。
由于写这篇文章的状态是work in progress
我的猜测是浏览器有一个“懒惰”的颜色和伽马校正实现,这目前也影响形状 - 或者 - 来自画布的所有颜色信息都被校正以显示配置文件作为后一点第一个报价。在标准成为最终标准之前,这可能不会改变。