就像我在标题中所说的那样,我正在尝试制作一个颜色选择器(使用 HTML/CSS/JS,如果这很重要),并且我将其基于 DuckDuckGo 的颜色选择器 ( seen here )。
他们使用半透明图像覆盖在纯色的 div 上。我认为图像只是一个垂直的白色 --> 黑色渐变和一个水平和垂直不透明度渐变。事实证明它比这更复杂。
我下载了他们用于颜色选择器的图像并删除了 Alpha channel 。我已经上传到这里了。顺便说一句,出于某种原因,他们似乎对此有微妙的噪音。
我不知道用什么方程来生成这个。
我确实知道 Alpha channel 等于 1 - (x * y)
,但我不知道使用什么算法来获取 RGB channel 。
我还想为 HSL 颜色选择器生成类似的图像。我假设它的算法相同,但垂直缩放一半并镜像。这是正确的吗?
最佳答案
我解决了。
绘制一个从左侧的纯白色到右侧的透明白色 (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 颜色选择器的一组渐变。
关于javascript - 我正在尝试制作 HSV 颜色选择器,但我不知道如何生成覆盖图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42322513/