從畫布獲取像素顏色

Question

我正在使用javascript和HTML5畫布創建顏色選擇器。 我正在嘗試使用以下代碼來獲取顏色選擇器上特定像素的顏色，但是每次它只會返回黑色： rgb(0, 0, 0) 。 但是，如果我用硬編碼值替換this.getGradientPos.X和this.getGradientPos.Y ，它會正常工作。 如果只有X或Y變量之一到位並且另一個是硬編碼的，它也可以工作。 在控制台中， curGradPos.X和curGradPos.Y都顯示正確的位置。 我不知所措。

ColorPicker.prototype.getGradientColor =
function()
{   
    j = this.context.getImageData(this.curGradPos.X, this.curGradPos.Y, 1, 1);
    k = j.data;
    console.log(this.curGradPos);
    console.log(k);

    return {r: k[0], g: k[1], b: k[2]};
}

這將初始化變量。

function ColorPicker()
{
    this.canvas = document.getElementById('colorPicker');

    this.curColor = this.baseColor = {r: 255, g: 0, b: 0};
    this.context = this.canvas.getContext('2d');

    this.curGradPos = {X: 255, Y: 255};
}

並在mousemove上更新curGradPos變量。

rect = this.canvas.getBoundingClientRect();
x = event.clientX - rect.left;
y = event.clientY - rect.top;

if (x >= 15 && x < 15+255 && y >= 15 && y < 15+255)
{
    this.curGradPos = {X: x, Y: y}; //seems to be correct
    this.drawColorGradient();
    this.curColor = this.getGradientColor(); //above function with issue
}

Answer 1

該代碼似乎從標記讀取顏色，而不是從標記“后面”讀取顏色。

需要從該位置讀取顏色，然后設置標記，否則您將在該位置獲得標記的顏色。 當然，因為標記是黑色的，所以每次都會返回顏色。