javascript：将温度映射到特定的HSL色调值

Question

我的问题与Jon P在此问题question pointed to by Jon P中提到的问题不同，并在上面标记为已经提出的问题。那个问题是显示整个温度梯度。这个问题是将单一色调附加到单一温度。

我需要以一种颜色显示单个数字温度值，该颜色将温度映射到hsl轮上的一系列色调中的某个色调。我需要高温显示为非常红色（hsl轮上为330），低温显示为非常蓝色（hsl轮上为270）。

在下面的评论Scott Sauyet建议中做了一些工作之后，我解决了我的问题并将其发布在下面。

Answer 1

根据Alnitak的答案，在这篇帖子question 16399677中显示温度梯度，我开发了一个函数，用于将单个温度映射到hsl颜色的用户可定义范围内的特定色调轮。

html
<canvas width="300" height="40" id="c"> </canvas>

javascript
var c = document.getElementById('c');
var ctx = c.getContext('2d');
temp = 70; // at 70, getHue() returns a purple around the 300deg mark
var hue = getHue(temp);
ctx.fillStyle = 'hsl(' + [hue, '100%', '50%'] + ')';
ctx.fillRect(0, 0, 40, 40);

function getHue(nowTemp) {
  // following hsl wheel counterclockwise from 0
  // to go clockwise, make maxHsl and minHsl negative 
  // nowTemp = 70;
  var maxHsl = 380; // maxHsl maps to max temp (here: 20deg past 360)
  var minHsl = 170; //  minhsl maps to min temp counter clockwise
  var rngHsl = maxHsl - minHsl; // = 210

  var maxTemp = 115;
  var minTemp = -10;
  var rngTemp = maxTemp - minTemp; // 125
  var degCnt = maxTemp - nowTemp; // 0
  var hslsDeg = rngHsl / rngTemp;  //210 / 125 = 1.68 Hsl-degs to Temp-degs
  var returnHue = (360 - ((degCnt * hslsDeg) - (maxHsl - 360))); 
  return returnHue;  
}