javascript - 我正在尝试制作 HSV 颜色选择器，但我不知道如何生成覆盖图像

Question

就像我在标题中所说的那样，我正在尝试制作一个颜色选择器(使用 HTML/CSS/JS，如果这很重要)，并且我将其基于 DuckDuckGo 的颜色选择器 ( seen here )。

他们使用半透明图像覆盖在纯色的 div 上。我认为图像只是一个垂直的白色 --> 黑色渐变和一个水平和垂直不透明度渐变。事实证明它比这更复杂。

我下载了他们用于颜色选择器的图像并删除了 Alpha channel 。我已经上传到这里了。顺便说一句，出于某种原因，他们似乎对此有微妙的噪音。

我不知道用什么方程来生成这个。
我确实知道 Alpha channel 等于 1 - (x * y)，但我不知道使用什么算法来获取 RGB channel 。

我还想为 HSL 颜色选择器生成类似的图像。我假设它的算法相同，但垂直缩放一半并镜像。这是正确的吗？

Answer 1

我解决了。

绘制一个从左侧的纯白色到右侧的透明白色 (rgba(255,255,255,0)) 的渐变，然后使用 alpha 混合在顶部绘制另一个渐变，从底部的纯黑色到透明的黑色顶部。

使用 JavaScript Canvas 的示例代码

var ctx = document.getElementByID("canvas").getContext("2d");

var saturationGradient = ctx.createLinearGradient(0, 0, 256, 0);
saturationGradient.addColorStop(0, "rgba(255, 255, 255, 1)"); //white
saturationGradient.addColorStop(1, "rgba(255, 255, 255, 0)"); //white transparent
var valueGradient = ctx.createLinearGradient(0, 0, 0, 256);
valueGradient.addColorStop(0, "rgba(0, 0, 0, 0)"); //transparent
valueGradient.addColorStop(1, "rgba(0, 0, 0, 1)"); //black

ctx.fillStyle = saturationGradient;
ctx.fillRect(0, 0, 256, 256);
ctx.fillStyle = valueGradient;
ctx.fillRect(0, 0, 256, 256);

我无法弄清楚的原因是因为我使用的是多重混合而不是 alpha 混合。

我还没有弄清楚 HSL 颜色选择器的一组渐变。