将渐变映射到数值

Question

我需要在div / canvas或其他东西上绘制渐变。渐变将从一种颜色开始，到另一种颜色结束。所以只有两种颜色（以及之间的颜色）。让我们说它从白色开始，以黑色结束。

正在处理的应用程序调用一个API，它会在1-100之间重新调整数字。 渐变的宽度应为100％我认为使数学“容易”。

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

我该怎么做？任何想法或代码？

Answer 1

如果我理解正确，你有：

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

让我们假设你保存了这样的十六进制颜色（这里白色是startColor）：

startColor.red = 255;
startColor.green = 255;
startColor.blue = 255;

您可以计算两种颜色的差异：

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

我不知道这是否是您正在寻找的。我无法判断你的问题是否过于复杂或非常简单。