Javascript canvas.getImageData IE与Chrome

Question

我有一个canvas对象，我想通过它从canvas.getImageData获取位置的颜色。 当我在其上绘制渐变并尝试从点（0,0）获取颜色时，chrome的行为符合预期，并返回颜色值255,255,255，而IE返回254,253,253。

我在这里有一个插销，显示了我的意思：

http://plnkr.co/edit/BWSn2J2N2A6poaH4WR6a?p=preview

您只需在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有这种区别吗？还是我在创建画布时错过了某些东西？

Answer 1

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

我们可以用内部工作做很多事情，但是我们可以调整子像素，因此仅通过平移画布的半像素就不会发生这种情况。

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

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

它应该工作

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

更新 （来自评论）：

另一种使用坐标而不是选择像素来计算颜色值（HSL）的方法（该方法还允许您根据输入值在选择器中设置一个点）：

Answer 2

这是正常的...

允许不同的浏览器隐含稍微不同的画布渐变渲染。

在每个浏览器上，即使一张图像的渲染也会稍有不同。