Javascript 将渐变映射到数值

我需要在div/画布上画一个渐变。渐变将从一种颜色开始，在另一种颜色结束。因此，只有两种颜色（以及介于两者之间的颜色）。假设它从白色开始，到黑色结束

我正在处理的应用程序调用一个API，该API返回一个介于1-100之间的数字。 梯度的宽度应该是100%，我认为这会让数学变得“简单”

我从API获得的数字应该映射到渐变中的位置和十六进制代码，并返回这两个

---

我该怎么做那样的事？有什么想法或代码吗？

如果我理解正确，您有：

startColor at 0%
endColor at 100%
chosenColor at x%

假设您保存了如下十六进制颜色（此处白色为起始颜色）：

计算两种颜色的差异：

diffColor.red = endColor.red - startColor.red;
diffColor.green = endColor.green - startColor.green;
diffColor.blue = endColor.blue - startColor.blue;

然后根据x值将差值添加到startColor：

markerColor.red = startColor.red + diffColor.red * x / 100;
markerColor.green = startColor.green + diffColor.green * x / 100;
markerColor.blue = startColor.blue + diffColor.blue * x / 100;

如果需要计算位置，则按相同的方式进行：

markerPosition = startPosition + distance / x * 100

---

我不知道这是不是你要找的。我不知道你的问题是超级复杂还是非常简单。

听起来不太容易，你必须更具体一些，如何将数字转换为十六进制颜色，以及什么十六进制颜色等等？我知道。我觉得这可能真的很难。因此，基本上应用程序接收的数字在1-100之间。根据渐变上设置的标记值。如果数字为12，则标记位于左侧：12%；在gradient-div上。我需要知道渐变在特定位置的颜色。（左起12%）。渐变从左向右。

markerPosition = startPosition + distance / x * 100