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