HTML5 Canvas绘制像素的颜色不同于提供的颜色 [英] HTML5 Canvas drawing pixels with different color than the one provided

问题描述

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

After setting a certain colour as the fillStyle of the canvas and drawing a rectangle with fillRect, the colour of the rectangle sometimes differs a bit from the one provided (the getImageData returns different values - usually one of them is lower by 1). It seems to happen only when using rgba colours (and not with rgb) but I actually do need to use the alpha channel.

我已经为任何想要查看这个问题的人提供了一个简单的测试套件：
http://jsfiddle.net/LaPdP/1/

I've made a simple test suite on js fiddle for anyone who would like to look into this issue: http://jsfiddle.net/LaPdP/1/

有关为什么会出现这种情况的任何想法如果有任何方法来解决这个问题？如果它至少发生总是在相同的值，那么我只是绕过它增加1，但它似乎很随机对我来说。

Any ideas on why is this happening and if there is any way to fix that? If it at least happened always on the same value then I'd just bypass it by increasing it by 1, but it seems quite random to me.

推荐答案

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

What you are experiencing is probably a result of only a partial implementation of the color and gamma correction section in the canvas standard.

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

The reason for various color values, at least when it comes to images containing ICC profiles, is due to the built-in color and gamma correction in the browsers:

4.8.11.1颜色空间和颜色校正

4.8.11.1 Color spaces and color correction

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

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节中指出：

However, it also states in section 4.8.11.1:

注意：用于在
画布上绘制形状的颜色将完全匹配通过getImageData（）
方法获得的颜色。

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

因为这是写的状态是一个工作我的猜测是，浏览器有一个延迟的颜色和伽玛校正的实现，目前也影响形状 - 或 - 来自画布的所有颜色信息被校正以显示轮廓作为第一报价中的后一点。这可能不会改变，直到标准成为最终。

As the status as this is written is a work in progress my guess is that the browsers has a "lazy" implementation of color and gamma correction which currently also affects shapes - or - all color information from the canvas is corrected to display profile as the latter point in first quote. This will perhaps not change until the standard becomes final.

这篇关于HTML5 Canvas绘制像素的颜色不同于提供的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！