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();
}