javascript - 从 Canvas 获取像素颜色

Question

我正在使用 javascript 和 HTML5 Canvas 创建颜色选择器。我尝试使用以下代码获取颜色选择器上特定像素的颜色，但每次都返回黑色: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

代码似乎是从标记读取颜色而不是它“背后”的颜色。

需要从该位置读取颜色，然后设置标记，否则您将在该位置获取标记的颜色；当然，由于标记是黑色的，因此每次都会返回颜色。