2

我正在使用 javascript 和 HTML5 画布创建颜色选择器。我正在尝试使用以下代码来获取颜色选择器上特定像素的颜色，但它每次都返回黑色rgb(0, 0, 0)：但是，如果我用硬编码值替换this.getGradientPos.Xand ，它就可以正常工作。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
}
4

1 回答 1

1

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

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

于 2013-09-25T20:21:58.267 回答