我正在使用 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
}
最佳答案
代码似乎是从标记读取颜色而不是它“背后”的颜色。
需要从该位置读取颜色,然后设置标记,否则您将在该位置获取标记的颜色;当然,由于标记是黑色的,因此每次都会返回颜色。
关于javascript - 从 Canvas 获取像素颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19013788/