javascript - 如何在两种给定颜色的范围内生成 n 种颜色？

Question

我正在尝试在 JavaScript 中动态计算饼图的颜色范围。我需要颜色从开始蓝色逐渐过渡到结束蓝色，并且考虑到我不知道会有多少个饼图切片，我需要根据变量的值来计算它: n.

我在 Java 中找到了这个问题的一个很好的答案:How to dynamically compute a list of colors?

但我并不能 100% 确定它如何转化为 JavaScript。我还需要它们以数组格式排列(从最亮到最暗/从最​​暗到最亮)。

var colorArray = [];
var startColor = #18AED5;`
var endColor   = #1E1E26;`
// Calculate Colors...`

如果有人能提供帮助，我将不胜感激。

Answer 1

你好，我创建了一个小Demo

JS:

var div = document.getElementById('div');
var a = b = c = 0;
setInterval(function(){
    div.style.backgroundColor = 'rgb('+a+','+b+','+c+')';
    a+=1;
    b+=2;
    c+=3;
}, 50);

使用 rgb() 比十六进制更容易处理动态颜色变化。

<小时/>

更新:

我能够按照你的意愿去做。从一种颜色变为另一种颜色。 Demo2

var div = document.getElementById('div');

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

var dynamicColorChange = function (start, end, target) {
    var startRGB = hexToRgb(start),
        endRGB = hexToRgb(end),
        si = setInterval(function () {
            if (startRGB.r < endRGB.r) {
                startRGB.r += 1;
            }else if(startRGB.r > endRGB.r){
            startRGB.r -= 1;
            }
            if (startRGB.g < endRGB.g) {
                startRGB.g += 1;
            }else if(startRGB.g > endRGB.g){
                startRGB.g -= 1;
            }
            if (startRGB.b < endRGB.b) {
                startRGB.b += 1;
            }else if(startRGB.b > endRGB.b){
                startRGB.b -= 1;
            }
            target.style.backgroundColor = 'rgb(' + startRGB.r + ',' + startRGB.g + ',' + startRGB.b + ')';
            if (startRGB.r == endRGB.r && startRGB.g == endRGB.g && startRGB.g == endRGB.g) {
                clearInterval(si);
            }
        }, 50);
    console.log(startRGB);
    console.log(endRGB);
};

dynamicColorChange('#18AED5', '#1E1E26', div);