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我的猜測是瀏覽器具有顏色和伽馬校正的“懶惰”實現，其當前也影響形狀 - 或者 - 來自畫布的所有顏色信息被校正為顯示簡檔作為第一個引用的后一點。 在標准成為最終標准之前，這可能不會改變。