js 获取渐变颜色

// 设置元素的背景为线性渐变
const element = document.getElementById('gradientElement');
element.style.background = 'linear-gradient(to right, red, blue)';

// 获取元素的背景渐变字符串
const gradient = window.getComputedStyle(element).backgroundImage;

console.log(gradient); // 输出类似 "linear-gradient(to right, rgb(255, 0, 0), rgb(0, 0, 255))"

function getGradientColors(startColor, endColor, steps) {
    const startRGB = hexToRgb(startColor);
    const endRGB = hexToRgb(endColor);
    const gradientColors = [];

    for (let i = 0; i < steps; i++) {
        const r = Math.round(startRGB.r + (endRGB.r - startRGB.r) * i / (steps - 1));
        const g = Math.round(startRGB.g + (endRGB.g - startRGB.g) * i / (steps - 1));
        const b = Math.round(startRGB.b + (endRGB.b - startRGB.b) * i / (steps - 1));
        gradientColors.push(`rgb(${r}, ${g}, ${b})`);
    }

    return gradientColors;
}

function hexToRgb(hex) {
    const 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;
}

// 使用示例
const startColor = '#FF0000'; // 红色
const endColor = '#0000FF';   // 蓝色
const steps = 5;               // 渐变步数

const gradientColors = getGradientColors(startColor, endColor, steps);
console.log(gradientColors);
// 输出: ["rgb(255, 0, 0)", "rgb(170, 0, 85)", "rgb(85, 0, 170)", "rgb(0, 0, 255)", "rgb(0, 0, 255)"]