Question

我正在尝试动态计算JavaScript中饼图的颜色范围。我需要逐渐从Start Blue到End Blue逐步增加颜色，并且鉴于我不知道将会有多少个Pie切片，我需要根据变量的值来计算它：{{1 }}

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

但我不能100％确定这是如何转化为JavaScript的。我还需要它们以数组格式排列（最亮到最暗/最暗到最亮）。

如果有人可以提供帮助，我会非常感激。

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);

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

1 个答案: