Javascript 颜色渐变

Question

在有或没有 Jquery 的情况下使用 javascript，我需要根据开始和结束颜色创建颜色渐变。这可以通过编程方式完成吗？

结束颜色只会比开始颜色更暗，它是一个无序列表，我无法控制 li 项目的数量。我正在寻找一种解决方案，允许我选择开始和结束颜色，将十六进制值转换为 RGB，以便可以在代码中对其进行操作。起始 RGB 值按基于项目数计算的步长值递增。

所以如果列表有 8 个项目，那么它需要在 8 个步骤中递增单独的红绿蓝值以获得最终颜色。有没有更好的方法，如果有，我在哪里可以找到一些示例代码？

Answer 1

我创建了一个 JS 库，RainbowVis-JS来解决这个普遍的问题。您只需使用 setNumberRange 设置项目数量，并使用 setSpectrum 设置开始和结束颜色。然后使用 colourAt 获取十六进制颜色代码。

var numberOfItems = 8;
var rainbow = new Rainbow(); 
rainbow.setNumberRange(1, numberOfItems);
rainbow.setSpectrum('red', 'black');
var s = '';
for (var i = 1; i <= numberOfItems; i++) {
    var hexColour = rainbow.colourAt(i);
    s += '#' + hexColour + ', ';
}
document.write(s); 
// gives:
// #ff0000, #db0000, #b60000, #920000, #6d0000, #490000, #240000, #000000, 

欢迎您查看库的源代码。 :)