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

（I除去記錄代碼爲上面的代碼段）

這是爲什麼閃爍在頂部漸變的圓上拖動時是白色還是黑色？

Answer 1

警告：閱讀:-)之前，從任何牆壁讓你的頭遠遠不夠

你被測量...光標（黑色==「＃000000」）的顏色，這就是爲什麼你有這些奇怪零。
要快速查看，只需在drawCursor()開頭鍵入return;即可：不再爲零。
要修復它（重新）之前繪製測量顏色與getColor()內mouseMoveListener()：

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