HTML5 캔버스 getImageData 값 픽셀 색상이 흰색과 검은 색으로 깜박임

Question

색상 선택 도구를 만들고 있는데 그라디언트가있는 HTML5 캔버스에서 색상을 가져 왔습니다. 대부분의 경우 적절한 색상을 표시하지만 때로는 흰색 또는 검정색이 무작위로 표시됩니다. 아래에 왼쪽과 아래쪽 픽셀을 제외한 모든 검정색과 흰색을 기록하는 데모가 있습니다.

DEMO : (I 위의 조각에 대한 로깅 코드를 제거)

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

이

왜이 깜박입니다 : http://jsfiddle.net/ek2kD/

맨 아래에 문제의 코드는, 이것이다 흰색과 검은 색을 위쪽 그라디언트에서 원을 중심으로 드래그 할 때?

Answer 1

경고 : :-) 읽기 전에 벽에서 충분히 멀리 당신의 머리를 얻을

당신이 그 이상을 가지고 왜 당신은 ... 커서 (검은 색 == '# 000000')의 색상, 그건 측정되었다

0.
빨리 확인하려면 을 drawCursor()의 시작 부분에 입력하십시오 (더 이상 0이 아님).
는 (재) 수정 getColor()mouseMoveListener() 내부와 색상을 측정 전에 을 그리려면 :

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