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

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

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

从画布中获取像素颜色

1 个答案: