为什么函数在画布中返回错误的颜色？答案

【问题标题】：Why function returns wrong color in canvas?为什么函数在画布中返回错误的颜色？
【发布时间】：2015-01-15 10:38:07
【问题描述】：

我的画布颜色是 50 255 50 155。当我做代码时：

function getClickedAreaColor(x, y) { var data = ctx.getImageData(x, y, 1, 1).data, color = []; for (var i = 0; i < data.length; i++) { color.push(data[i]); } return color; }

返回 49 255 49 155 这是为什么呢？

【问题讨论】：

红绿蓝阿尔法？
你是怎么画的？在这里它工作正常：jsfiddle.net/jtav1dm6
在您的示例数据中返回 50 255 50 255，而不是 50、255、50、155
当画布颜色中的 Alpha 低于 255 时，该函数只返回错误颜色。
我的错，alpha 通道应该是十进制的，我更改了它，现在我可以看到问题，但这是规范所期望的

标签： javascript canvas colors

【解决方案1】：

specs for the getImageData method中有这样的情况说明：

由于与预乘 alpha 相互转换的有损性质颜色值，刚刚使用 putImageData() 设置的像素可能会作为不同的值返回到等效的 getImageData()。

它可以解释为什么你会看到这种差异

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle="rgba(50, 255, 50, 0.607843137254902)"
ctx.rect(0, 0, 100, 100);
ctx.fill();

console.log(ctx.getImageData(0, 0, 1, 1).data);

http://jsfiddle.net/jtav1dm6/2/

【讨论】：