Javascript 根据室外温度设置背景色

嘿，所以

我有一个温度小部件要在我正在工作的项目上实现。 没有什么特别困难的，我有一个免费的API来检索我需要的数据

但是，和我一起工作的可爱的设计师会有一个我没有好主意开始的颜色特征

他希望根据当前的天气温度来定义背景色

我的意思是如果温度是冷的，比如-20，背景颜色应该是蓝色/紫色/任何冷颜色；当它是温暖的，如25，它应该有一个热的背景色，如橙色/红色

我想我可以很容易地使用一系列“温度步长”，但我更喜欢使用一个函数，该函数可以根据温度定义颜色。我知道这很奇怪，我不知道是否有一种算法可以通过温度颜色来定义颜色。。。 这篇文章很有帮助，但相当复杂，如果有人有任何想法，即使是一个开始，我很感兴趣

我看到这条线：

但我不使用C#，我也不想使用，所以如果有一个JavaScript解决方案，它将是完美的。如果服务器端需要，我最终可以使用PHP或NodeJS

编辑-回答：

最后，由于图形的需要，我没有选择使用真正的颜色渐变数组。 但是我还是要根据温度的不同来混合最接近的步骤的颜色！ 我写了一个小的JS库来实现这一点，你很快就能在GitHub上找到它，我将在这里发布链接

你可以在这里找到它：

---

我最近遇到了一个难题，就是使用时间数据来显示时间对应的天空颜色。这很难，以下是我探索的三种方法：

1） 糟糕的方法：分别为R、G、B通道创建一个函数，该函数将接受温度的x截距，并在温度范围和相应颜色上为红色通道、蓝色通道和绿色通道生成y截距。为了做到这一点，我将对其进行逆向工程，沿着颜色范围对温度进行一些主要划分，并绘制尽可能多的点，然后通过每个通道的点绘制一个6次多项式。您将获得一个函数，该函数可以接受一个温度值，并为alpha 1的RGB颜色的R、G和B通道组合3个输出。应该可以，但还没有测试过，我不愿意哈哈

2） 为每个主要颜色（您决定是5色还是50色）创建一个背景类，并使用alpha混合在它们之间切换。这就是我最后用在我的问题上的东西

if(temp > 0 && temp <= 5)
{
     greenBackground.alpha == 1
     yellowBakckground.alpha == (temp/5)
}
else if(temp > 5 && temp <= 10)

---

if（temp>0&&temp>5&&temp维基百科关于色温的文章与您的问题无关。维基百科文章仅与数字成像专家相关。在这种情况下，色温的含义不同

您的问题是如何以摄氏度为单位显示特定的温度。没有标准的算法来执行此操作。如何解决此任务取决于设计师

我可能会为每2.5°C或5°C构建一个rgb值数组，然后通过rgb混合中间的温度值。
您的颜色范围看起来与“HSL颜色空间”中的“仅色调”扫描相同，从-30ºC下的270º（紫色）到+30ºC下的30º（橙色）

var hue = 30 + 240 * (30 - t) / 60;

如果
t
超出范围，请在调用上述表达式之前将其钳制，或在调用后将
h
钳制到所需的色调范围

在支持的浏览器上，您可以使用
hsl（h，s，l）
颜色字符串，或使用常用函数将hsl颜色转换为RGB

参见
< P>这是一个特殊的情况，不是一般的解决方案，而是通过简单地在色调之间做线性梯度，并在中间范围（即绿色）中缩小混合，可以得到一个合理的近似，没有颜色步进：

演示：

//
//将-30到30度的温度映射到
//颜色
//
var F=函数（t）
{
//将温度映射到0-1范围
var a=（t+30）/60；
a=（a<0）？0:（（a>1）？1:a）；
/在中间减少绿色/青色范围
var符号=（a<0.5）？-1:1；
a=符号*数学功率（2*数学绝对值（a-.5），.35）/2+.5；
//冷与热之间的线性插值
var h0=259；
var h1=12；
var h=（h0）*（1-a）+（h1）*（a）；
返回推进器颜色（“hsv”，h，75，90）.hex6（）；
};
如果没有基于step的类，您将如何做到这一点？我想我并不完全明白您的想法suggest@George--这是如何“过于本地化”的？这不是一个可以帮助他人的合理问题吗？@GeorgeStocker很抱歉，我不是出生在任何一个英国国家，我应该为此而死吗？如果有语法问题，编辑这个问题不是更好吗？但更重要的是，你怎么能说“没有研究努力”或“我需要有人为我写一个算法”？？？？？我说我读了另一篇帖子，以及维基百科上一篇关于颜色的相当复杂的文章，我必须就我要问的问题写一篇论文吗？而且——正如问题中所写的那样——我只是想问一些想法，而不是一个完整的算法！！！！！@Flo Schield Bobby只是想问一些想法是无效的。请阅读常见问题解答：我发现这个问题很简单如果我有足够的时间，我会创造一个解决方案。但看看这个：混合只有色调不同的颜色的RGB值会产生“浑浊”你说得对，你们两个，我发现了这些要点，但在重新打开之前，我感觉编辑这个问题不太好！但是谢谢！我目前使用渐变数组，效果很好，但是你必须选择你的颜色步骤以避免“浑浊”还有@Alnitak，因为我在实验室的颜色空间工作，我可以避免这个混合问题-至少
//
// Function to map a -30 to 30 degree temperature to 
// a color
//
var F = function(t)
{
    // Map the temperature to a 0-1 range
    var a = (t + 30)/60;
    a = (a < 0) ? 0 : ((a > 1) ? 1 : a);

    // Scrunch the green/cyan range in the middle
    var sign = (a < .5) ? -1 : 1;
    a = sign * Math.pow(2 * Math.abs(a - .5), .35)/2 + .5;

    // Linear interpolation between the cold and hot
    var h0 = 259;
    var h1 = 12;
    var h = (h0) * (1 - a) + (h1) * (a);

    return pusher.color("hsv", h, 75, 90).hex6();
};