如何计算调色板中所选颜色的颜色

Question

这是我之前问的问题的后续

以前，我在调色板中的选定像素上使用getImageData来确定颜色。然而，渐变并不总是完全准确的。谷歌的颜色选择器也是如此。他们的调色板并不完全准确，但他们根据你在调色板中选择的位置返回的颜色是。

因此，假设这段代码正在生成调色板：

function drawPalette(hue) {
var ctx = document.querySelector("canvas").getContext("2d");
let w = ctx.canvas.width;
let h = ctx.canvas.height;
var grH = ctx.createLinearGradient(0, 0, w, 0);
grH.addColorStop(0, '#fff');
grH.addColorStop(1, 'hsl(' + hue + ', 100%, 50%)');
ctx.fillStyle = grH;
ctx.fillRect(0, 0, w, h);
var grV = ctx.createLinearGradient(0, 0, 0, h);
grV.addColorStop(0, 'rgba(0,0,0,0)');
grV.addColorStop(1, '#000');
ctx.fillStyle = grV;
ctx.fillRect(0, 0, w, h);
}
drawPalette(120);

<canvas></canvas>

那么，我该如何确定画布中任何给定坐标处的颜色？getImageData将不起作用，因为它将稍微不准确。相反，我相信我需要一个函数，给定色调、x位置、y位置、宽度和高度，它将返回调色板中该位置的颜色。这能做到吗？

Answer 1

你知道鼠标(或指针(的位置在哪里(pointerdown，pointermove(，所以你应该能够计算出相对于你在上一个问题中构建的画布的位置(CSS线性梯度不准确？(，作为百分比(如果指针在300像素宽的画布上的一半，那么50%，垂直位置也是如此(。左下角为0%，右上角为100%，100%。

与色调相结合的百分比将为HSV值，其中：

H = hue
S = saturation = left to right percentage
V = value = bottom to top percentage

然后，您可以使用将HSV值转换为HSL值

function hsv2hsl(h, s, v) {
var l = v - (v * s) / 2;
var m = Math.min(l, 1 - l);
return [h, m ? (v - l) / m : 0, l];
}

如果鼠标位于画布的右侧，则该值将为100%。