帆布getImageData給人以graident

Question

我使用畫布功能getimagedata

有線問題使用帶有梯度（填充顏色從實際值變化到白色）帆布接在任何一點的顏色（鼠標點擊）錯誤的結果： Canvas.getImageImadata給地方錯誤的價值觀和正確的大多

JSFIDDLE Demo

Answer 1

您需要更正鼠標的位置，使其成爲相對畫布。默認情況下它是相對於客戶端窗口。

要糾正你可以做到以下幾點：

$('#myCanvas').click(function(e) { 

    var r = $('#myCanvas')[0].getBoundingClientRect(); // get canvas abs. pos. 
    //OR 
    //var r = $('#myCanvas').position(); 
    x = e.clientX - r.left;        // make relative 
    y = e.clientY - r.top; 

    var data=ctx.getImageData(x,y,1,1).data; 

    $('#feedback').html("Red : "+data[0]+" __ Green : " + 
         data[1]+" __ Blue : "+data[2]+" __ Alpha : "+data[3]) 
}); 

否則，你會品嚐這將使一個空白的ImageData對象畫布外。

Modified fiddle

希望這有助於！