HTML5 Canvas的getImageData值像素颜色闪烁白色和黑色

Question

我正在创建一个颜色选择器，并使用渐变从HTML5画布中提取颜色。 大多数情况下，它会显示正确的颜色，但有时会随机显示白色或黑色。 我在下面有一个演示，其中记录了所有黑白（左上方和下方像素除外）。

演示： http : //jsfiddle.net/ek2kD/

最下面的代码是这样的：

function getColor()
{
    var pixelColor = contextTone.getImageData(mouseXGo, mouseYGo, 1, 1).data;
    var hex = "#" + ("000000" + ((pixelColor[0] << 16) | (pixelColor[1] << 8) | pixelColor[2]).toString(16)).slice(-6);
    document.getElementById("preview").style.backgroundColor = hex;
}

（我删除了上面代码段的日志记录代码）

为什么在顶部渐变上的圆圈周围拖动时，这种闪烁的白色和黑色？

Answer 1

警告：在阅读之前，请让您的头离墙壁足够远：-)

您正在测量...光标的颜色（黑色=='＃000000'），这就是为什么会有那些奇怪的零。
要快速查看，只需键入return; 在drawCursor()的开始处：不再为零。
要修复此问题，请在mouseMoveListener()内部使用getColor()测量颜色之前重新绘制：

function mouseMoveListener(evt) {
    // same code here ...
    draw();
    getColor();
    drawCursor();
}