Javascript canvas.getImageData IE vs Chrome

我有一个canvas对象，我想从中获得canvas.getImageData位置的颜色。当我在其上绘制渐变并尝试从点（0,0）获取颜色时，chrome的行为与预期一致，并返回颜色值255255，而IE返回254253

我这里有一个plunker，它表明了我的意思：

你可以在IE和Chrome中执行，你会看到不同之处。 我使用IE v11和Chrome v40

可能是在我创建画布时出错了

var RepaintGradient = function(gradient)
{           
    _gradientContext.fillStyle = 'rgb(255,0,0)';
    _gradientContext.fillRect(0,0,width,height);

    var gradientWTT = _gradientContext.createLinearGradient(0, 0, width, 0);
    gradientWTT.addColorStop(0, "white");
    gradientWTT.addColorStop(1, gradient);
    _gradientContext.fillStyle = gradientWTT;
    _gradientContext.fillRect(0, 0, width, height);

    var gradientBTT = _gradientContext.createLinearGradient(0, width, 0, 0);
    gradientBTT.addColorStop(0, "black");
    gradientBTT.addColorStop(1, "transparent");
    _gradientContext.fillStyle = gradientBTT;
    _gradientContext.fillRect(0, 0, width, height);
    var color = _gradientContext.getImageData(0, 0, 1, 1).data;
    alert(color[0]+' '+color[1]+' '+color[2]);
};

---

这是一种正常的行为，IE和Chrome有这种差异，还是我在画布创建过程中遗漏了什么？

这是由于使用亚像素化时混合和合成过程中的舍入错误-不同的浏览器根据其方法获得不同的结果（IE和FireFox给出相同的结果，webkit浏览器给出不同的结果）

我们不能对内部工作做太多，但是我们可以调整子像素，这样就不会简单地平移画布的半像素

将此行添加到渐变函数的顶部：

  _gradientContext.setTransform(1,0,0,1, 0.5,0.5); // offset 0.5 pixel

原因是像素最初是从像素的中心渲染的，这意味着0.5个像素是双向插值的。平移0.5个像素将使中心与像素网格相匹配

更新（来自评论）：

另一种方法是使用值（HSL）而不是拾取像素（此方法还允许您根据输入值在选择器中设置点）：

这是正常的

不同的浏览器可以实现稍微不同的画布渐变渲染

---

即使是一个图像在每个浏览器上的呈现方式也会略有不同。

@Bongo没问题！请注意，如果在其他位置使用变换，则需要在函数中进行保存/还原（或者更好，根据需要重新生成变换）-否则，这将重置它们。@markE我还没有尝试过，但由于本例中的主要问题是亚像素化，它很有可能会工作。不过，alpha通道将是另一个因素（可能是gamma），因此需要对其进行测试…@Bongo使用坐标计算颜色值（HSL）的另一种方法，而不是拾取像素（此方法还允许您根据输入值在选取器中设置一个点）：@KenFyrstenberg我昨天将所有内容更改为坐标。因此，您的第二种方法是我的最爱：）@Bongo很高兴听到：）-我更新了答案以包含此内容。