如何使用javascript将数字转换为颜色亮度

How can I convert a number scale into color lightness using javascript?

本文关键字：颜色 亮度 转换 数字 何使用 javascript      更新时间：2023-09-26

我有一个从-10到+10的数字比例，我想将其转换为颜色比例(-10 =红色，0 =紫色，10 =蓝色)。我想我应该使用rgb来做这个，并使用x, y坐标和公式"y = mx+c"来调整红色和蓝色的亮度。我在如何编写这些函数方面遇到了麻烦，所以如果有任何帮助，我将不胜感激。

也欢迎其他建议!

此处:

//from problem
let rangeMin = -10;
let rangeMax = 10;
//width of the range
let width = rangeMax - rangeMin;
//other
let canvas = document.getElementById("cv");
let ctx = canvas.getContext("2d");
let step = rangeMin;
let msStep = 250;
let intervalId;
function scale(x) {
  if (typeof x !== "number" || x > rangeMax || x < rangeMin)
    throw "out of allowed range";
  //The interesting part of the code
  return [Math.round(0xff * (1 - ((x - rangeMin) / width))), 0, Math.round(0xff * ((x - rangeMin) / width))];
}
function draw() {
  let rgb = scale(step);
  ctx.fillStyle = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  step++;
  if (step > rangeMax) clearInterval(intervalId);
}
intervalId = setInterval(draw, msStep);
<html>
  <body>
    <canvas id="cv" width="400" height="100" style="border:1px solid #000000;">no canvas support</canvas>
  </body>
</html>

你需要将-10 to 10的范围转换为0 to 255和逆255 to 0，因为对于加性颜色，红+蓝=紫色，这意味着它可以从红色开始，在减少红色的同时增加蓝色。

首先将开始移到零(这不会影响范围的宽度，因此不会影响结果)，(x - rangeMin)。然后计算范围内的百分比，((x - rangeMin) / width)，注意倒数只是1减去百分比，1 - ((x - rangeMin) / width)。最后将其与目标范围(已经从零开始，否则需要再次进行移位)0xff * ((x - rangeMin) / width)和0xff * (1 - ((x - rangeMin) / width))分别相乘。

我有一组从-10到+10的数字，我想把它们转换成a色阶(-10 =红色，0 =紫色，10 =蓝色)。

你可以创建一个对象来存储从-10到10的属性;使用css transition生成red到blue之间的颜色，设置为对象的值;利用<input type="range">将step设置为1, input事件集元素background-color设置为<input type="range">对应对象的颜色.value 

window.onload = function() {
  var range = document.querySelector("input[type=range]");
  var color = document.querySelector("div");
  var output = document.querySelector("output");
  range.setAttribute("disabled", "disabled");
  var colors = {};
  var i = -10;
  color.style.color = "blue";
  colors[i] = getComputedStyle(color).getPropertyValue("color");
  var interval = setInterval(function() {
    colors[++i] = getComputedStyle(color).getPropertyValue("color");
    output.innerHTML = "loading " + Object.keys(colors).length + " colors..."
  }, 100);
  setTimeout(function() {
    clearInterval(interval);
    range.removeAttribute("disabled");
    range.value = output.innerHTML = colors[0];
    color.style.backgroundColor = colors[0];
    color.style.display = "block";
    color.style.transition = "none";
    range.focus();
    console.log(JSON.stringify(colors, null, 2));
    alert(Object.keys(colors).length 
          + " colors loaded,'n select color with range input");
    range.oninput = function(e) {
      color.style.backgroundColor = colors[this.value];
      output.innerHTML = colors[this.value];          
    }
  }, 2005);
}
div {
  height: 200px;
  outline: thin solid #000;
  color: red;
}
div, input[type="range"], output {
  font-size: 32px;
  position: relative;
  text-align: center;
  width: 200px;
  left:calc(50vw - 100px);
}
<input type="range" min="-10" max="10" step="1" value="0" />
<div style="transition: color 2s linear;"></div>
<br><output>loading colors...</output>

相关文章：