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

Question

我正在创建一个颜色选择器，我用它从渐变的HTML5画布中拉出颜色。大部分时间它显示正确的颜色，但有时会随机显示白色或黑色。我在下面有一个演示，它记录了所有的黑色和白色（除了左上角和下边的像素）。

DEMO：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()：不再为零 要修复它（重新）在使用getColor()内的mouseMoveListener()测量颜色之前绘制：

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