javascript - 将梯度映射到数值

Question

我需要在 div/canvas 之类的东西上绘制渐变。渐变将以一种颜色开始，以另一种颜色结束。所以只有两种颜色(以及它们之间组成的颜色)。假设它以白色开始，以黑色结束。

我正在处理的应用程序调用一个 API，该 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

我不知道这是否是您要找的。我无法判断您的问题是 super 复杂还是非常简单。