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

警告：在阅读之前，让你的头离任何墙壁都足够远：-)

你在测量。。。光标的颜色(black=='#000000')，这就是为什么你有那些奇怪的零
要快速查看，只需在drawCursor()开头键入return;：不再为零
在用getColor()在mouseMoveListener():内测量颜色之前修复(重新)绘制

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